diff --git a/app/components/app-library/ExampleLibraryApps.module.scss b/app/components/app-library/ExampleLibraryApps.module.scss index d35de6ca..e1d54b1f 100644 --- a/app/components/app-library/ExampleLibraryApps.module.scss +++ b/app/components/app-library/ExampleLibraryApps.module.scss @@ -22,10 +22,15 @@ transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; cursor: pointer; + position: relative; &:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + + .hoverOverlay { + opacity: 1; + } } } @@ -95,6 +100,41 @@ } } +.hoverOverlay { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.8); + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.2s ease-in-out; +} + +.hoverContent { + padding: 1rem; + color: white; + text-align: center; +} + +.hoverInfo { + font-size: 0.9rem; + line-height: 1.5; + + > div { + margin-bottom: 0.5rem; + } +} + +.warningText { + color: #ffd700; + font-weight: 500; + margin-top: 0.5rem; +} + @media (max-width: 768px) { .grid { grid-template-columns: repeat(2, 1fr); diff --git a/app/components/app-library/ExampleLibraryApps.tsx b/app/components/app-library/ExampleLibraryApps.tsx index 70ea3d4d..42278d06 100644 --- a/app/components/app-library/ExampleLibraryApps.tsx +++ b/app/components/app-library/ExampleLibraryApps.tsx @@ -5,6 +5,16 @@ import { type BuildAppResult, getRecentApps } from '~/lib/persistence/apps'; import styles from './ExampleLibraryApps.module.scss'; import { importChat } from '~/lib/persistence/useChatHistory'; +const formatDate = (date: Date) => { + return new Intl.DateTimeFormat('en-US', { + month: 'short', + day: 'numeric', + year: 'numeric', + hour: 'numeric', + minute: 'numeric', + }).format(date); +}; + export const ExampleLibraryApps = () => { const [numApps, setNumApps] = useState(6); const [apps, setApps] = useState([]); @@ -71,6 +81,17 @@ export const ExampleLibraryApps = () => {
{app.title || 'No preview'}
)}
{app.title || 'Untitled App'}
+
+
+
+
+ Created at {formatDate(new Date(app.createdAt))} in {Math.round(app.elapsedMinutes)} minutes +
+
{app.totalPeanuts} peanuts
+ {app.outcome !== 'success' &&
⚠️ Not all tests are passing
} +
+
+
))} diff --git a/app/lib/persistence/apps.ts b/app/lib/persistence/apps.ts index e031d867..82b3ac01 100644 --- a/app/lib/persistence/apps.ts +++ b/app/lib/persistence/apps.ts @@ -17,6 +17,7 @@ export interface BuildAppResult { protocolChatId: string; outcome: BuildAppOutcome; appId: string; + createdAt: string; } function databaseRowToBuildAppResult(row: any): BuildAppResult { @@ -35,6 +36,7 @@ function databaseRowToBuildAppResult(row: any): BuildAppResult { protocolChatId: row.protocol_chat_id, outcome, appId: row.app_id, + createdAt: row.created_at, }; } diff --git a/app/lib/persistence/useChatHistory.ts b/app/lib/persistence/useChatHistory.ts index 3eca5b3d..eb5ae788 100644 --- a/app/lib/persistence/useChatHistory.ts +++ b/app/lib/persistence/useChatHistory.ts @@ -14,7 +14,10 @@ export interface ResumeChatInfo { export async function importChat(title: string, messages: Message[]) { try { - const chat = await database.createChat(title, messages); + // Remove any peanuts when importing another chat, these are just for the current user. + const newMessages = messages.map((msg) => ({ ...msg, peanuts: undefined })); + + const chat = await database.createChat(title, newMessages); window.location.href = `/chat/${chat.id}`; toast.success('Chat imported successfully'); } catch (error) {