Refine project status display for imports

app/(dashboard)/projects/(list)/_components/home-page-content.tsx

@@ -1,13 +1,13 @@
 'use client'
 
 import { useEffect, useState } from 'react'
-import { ProjectStatus } from '@prisma/client'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { toast } from 'sonner'
 
 import { getInstallations } from '@/lib/actions/github'
 import type { ProjectWithRelations } from '@/lib/data/project'
 import { env } from '@/lib/env'
+import type { ProjectDisplayStatus } from '@/lib/util/project-display-status'
 
 import { PageHeaderWithFilter } from './page-header-with-filter'
 import { ProjectList } from './project-list'
@@ -21,7 +21,7 @@ interface HomePageContentProps {
 export function HomePageContent({ projects }: HomePageContentProps) {
   const router = useRouter()
   const searchParams = useSearchParams()
-  const [activeFilter, setActiveFilter] = useState<'ALL' | ProjectStatus>('ALL')
+  const [activeFilter, setActiveFilter] = useState<'ALL' | ProjectDisplayStatus>('ALL')
   const [hasTriggeredInstall, setHasTriggeredInstall] = useState(false)
 
   useEffect(() => {

app/(dashboard)/projects/(list)/_components/page-header-with-filter.tsx

@@ -1,11 +1,10 @@
 'use client'
 
-import { ProjectStatus } from '@prisma/client'
-
 import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'
+import type { ProjectDisplayStatus } from '@/lib/util/project-display-status'
 import { cn } from '@/lib/utils'
 
-type FilterStatus = 'ALL' | ProjectStatus
+type FilterStatus = 'ALL' | ProjectDisplayStatus
 
 interface PageHeaderWithFilterProps {
   activeFilter: FilterStatus
@@ -15,7 +14,9 @@ interface PageHeaderWithFilterProps {
 const filters: { label: string; value: FilterStatus }[] = [
   { label: 'All', value: 'ALL' },
   { label: 'Running', value: 'RUNNING' },
+  { label: 'Importing', value: 'IMPORTING' },
   { label: 'Stopped', value: 'STOPPED' },
+  { label: 'Needs Attention', value: 'NEEDS_ATTENTION' },
 ]
 
 export function PageHeaderWithFilter({ activeFilter, onFilterChange }: PageHeaderWithFilterProps) {

app/(dashboard)/projects/(list)/_components/project-card.tsx

@@ -4,6 +4,7 @@ import Link from 'next/link'
 
 import { Button } from '@/components/ui/button'
 import { Card, CardContent, CardHeader } from '@/components/ui/card'
+import type { ProjectDisplayStatus } from '@/lib/util/project-display-status'
 import { cn } from '@/lib/utils'
 
 import { ProjectActionsMenu } from './project-actions-menu'
@@ -14,6 +15,7 @@ interface ProjectCardProps {
   name: string
   description: string
   status: ProjectStatus
+  displayStatus: ProjectDisplayStatus
   updatedAt: string
   publicUrl?: string | null
 }
@@ -24,10 +26,11 @@ export function ProjectCard({
   name,
   description,
   status,
+  displayStatus,
   updatedAt,
   publicUrl,
 }: ProjectCardProps) {
-  const config = statusConfig[status]
+  const config = statusConfig[displayStatus]
   const initial = name.charAt(0).toUpperCase()
 
   // Handle open project button - open sandbox publicUrl in new tab
@@ -95,7 +98,7 @@ export function ProjectCard({
         <div className="flex items-center gap-2">
           {/* Status indicator */}
           <div className="relative flex h-2.5 w-2.5">
-            {status === 'RUNNING' && (
+            {displayStatus === 'RUNNING' && (
               <span
                 className={cn(
                   'animate-ping absolute inline-flex h-full w-full rounded-full opacity-75',

app/(dashboard)/projects/(list)/_components/project-list.tsx

@@ -1,14 +1,16 @@
-import { ProjectStatus } from '@prisma/client'
-
 import type { ProjectWithRelations } from '@/lib/data/project'
 import { formatRelativeTime } from '@/lib/util/format-time'
+import {
+  getProjectDisplayStatus,
+  type ProjectDisplayStatus,
+} from '@/lib/util/project-display-status'
 
 import { CreateProjectCard } from './create-project-card'
 import { ProjectCard } from './project-card'
 
 interface ProjectListProps {
   projects: ProjectWithRelations<{ sandboxes: true }>[]
-  activeFilter: 'ALL' | ProjectStatus
+  activeFilter: 'ALL' | ProjectDisplayStatus
 }
 
 export function ProjectList({ projects, activeFilter }: ProjectListProps) {
@@ -18,14 +20,15 @@ export function ProjectList({ projects, activeFilter }: ProjectListProps) {
     name: p.name,
     description: p.description || 'No description',
     status: p.status,
+    displayStatus: getProjectDisplayStatus(p),
     updatedAt: formatRelativeTime(p.updatedAt),
     publicUrl: p.sandboxes?.[0]?.publicUrl,
   }))
 
   const filteredProjects =
     activeFilter === 'ALL'
       ? mappedProjects
-      : mappedProjects.filter((p) => p.status === activeFilter)
+      : mappedProjects.filter((p) => p.displayStatus === activeFilter)
 
   return (
     <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
@@ -35,4 +38,4 @@ export function ProjectList({ projects, activeFilter }: ProjectListProps) {
       <CreateProjectCard />
     </div>
   )
-}
+}

app/(dashboard)/projects/(list)/_components/status-config.ts

@@ -1,4 +1,4 @@
-import { ProjectStatus } from '@prisma/client'
+import type { ProjectDisplayStatus } from '@/lib/util/project-display-status'
 
 export interface StatusConfigItem {
   color: string
@@ -7,7 +7,7 @@ export interface StatusConfigItem {
   animate?: string
 }
 
-export const statusConfig: Record<ProjectStatus, StatusConfigItem> = {
+export const statusConfig: Record<ProjectDisplayStatus, StatusConfigItem> = {
   // Stable states
   RUNNING: {
     color: 'text-emerald-500',
@@ -20,18 +20,19 @@ export const statusConfig: Record<ProjectStatus, StatusConfigItem> = {
     bg: 'bg-gray-500',
     label: 'Stopped',
   },
-  TERMINATED: {
-    color: 'text-gray-600',
-    bg: 'bg-gray-600',
-    label: 'Terminated',
-  },
   // Transition states
   CREATING: {
     color: 'text-yellow-500',
     bg: 'bg-yellow-500',
     label: 'Creating',
     animate: 'animate-pulse',
   },
+  IMPORTING: {
+    color: 'text-sky-400',
+    bg: 'bg-sky-400',
+    label: 'Importing',
+    animate: 'animate-pulse',
+  },
   UPDATING: {
     color: 'text-blue-500',
     bg: 'bg-blue-500',
@@ -62,9 +63,9 @@ export const statusConfig: Record<ProjectStatus, StatusConfigItem> = {
     bg: 'bg-red-500',
     label: 'Error',
   },
-  PARTIAL: {
-    color: 'text-purple-500',
-    bg: 'bg-purple-500',
-    label: 'Partial',
+  NEEDS_ATTENTION: {
+    color: 'text-amber-400',
+    bg: 'bg-amber-400',
+    label: 'Needs Attention',
   },
 }

lib/util/project-display-status.ts

@@ -0,0 +1,75 @@
+import type { ProjectImportStatus, ProjectStatus } from '@prisma/client'
+
+export type ProjectDisplayStatus =
+  | 'CREATING'
+  | 'IMPORTING'
+  | 'STARTING'
+  | 'RUNNING'
+  | 'STOPPING'
+  | 'STOPPED'
+  | 'UPDATING'
+  | 'TERMINATING'
+  | 'ERROR'
+  | 'NEEDS_ATTENTION'
+
+type ProjectDisplayStatusInput = {
+  status: ProjectStatus
+  importStatus: ProjectImportStatus
+  githubRepoFullName?: string | null
+  githubAppInstallationId?: string | null
+}
+
+export function isImportProject(project: {
+  githubRepoFullName?: string | null
+  githubAppInstallationId?: string | null
+}): boolean {
+  return Boolean(project.githubRepoFullName || project.githubAppInstallationId)
+}
+
+export function getProjectDisplayStatus(
+  project: ProjectDisplayStatusInput
+): ProjectDisplayStatus {
+  const importProject = isImportProject(project)
+
+  if (project.importStatus === 'FAILED') {
+    return 'NEEDS_ATTENTION'
+  }
+
+  if (project.status === 'ERROR') {
+    return 'ERROR'
+  }
+
+  if (project.status === 'TERMINATING') {
+    return 'TERMINATING'
+  }
+
+  if (project.status === 'STOPPING') {
+    return 'STOPPING'
+  }
+
+  if (project.status === 'STOPPED') {
+    return 'STOPPED'
+  }
+
+  if (project.status === 'UPDATING') {
+    return 'UPDATING'
+  }
+
+  if (importProject && (project.importStatus === 'PENDING' || project.importStatus === 'CLONING')) {
+    return 'IMPORTING'
+  }
+
+  if (project.status === 'CREATING') {
+    return 'CREATING'
+  }
+
+  if (project.status === 'STARTING') {
+    return 'STARTING'
+  }
+
+  if (project.status === 'RUNNING') {
+    return 'RUNNING'
+  }
+
+  return 'NEEDS_ATTENTION'
+}