UniqAI/bolt.diy
1
0
Fork 0
mirror of https://github.com/stackblitz-labs/bolt.diy synced 2025-06-26 18:26:38 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Support filtering apps (#116)

Browse Source
This commit is contained in:
Brian Hackett
2025-05-06 14:51:22 -10:00
committed by GitHub
parent 83380c2f5c
commit d82183b9cd
6 changed files with 95 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
app/components/app-library/ExampleLibraryApps.tsx
View File

@@ -16,7 +16,11 @@ const formatDate = (date: Date) => {
}).format(date);
};
export const ExampleLibraryApps = () => {
interface ExampleLibraryAppsProps {
filterText: string;
}
export const ExampleLibraryApps = ({ filterText }: ExampleLibraryAppsProps) => {
const [numApps, setNumApps] = useState<number>(6);
const [apps, setApps] = useState<BuildAppSummary[]>([]);
const [loading, setLoading] = useState(true);
@@ -53,11 +57,16 @@ export const ExampleLibraryApps = () => {
})();
}, [selectedAppId]);
useEffect(() => {
setApps([]);
setNumApps(6);
}, [filterText]);
useEffect(() => {
async function fetchRecentApps() {
try {
setLoading(true);
const recentApps = await getRecentApps(numApps);
const recentApps = await getRecentApps(numApps, filterText);
setApps(recentApps);
setError(null);
} catch (err) {
@@ -68,10 +77,8 @@ export const ExampleLibraryApps = () => {
}
}
if (apps.length < numApps) {
fetchRecentApps();
}
}, [numApps]);
fetchRecentApps();
}, [numApps, filterText]);
if (error) {
return <div className={styles.error}>{error}</div>;
@@ -148,7 +155,7 @@ export const ExampleLibraryApps = () => {
return (
<div className={styles.detailView}>
<div className={styles.detailHeader}>
<h3 className={styles.detailTitle}>{app.title}</h3>
<h3 className={`${styles.detailTitle} text-bolt-elements-textPrimary`}>{app.title}</h3>
<div className={styles.detailActions}>
<button
className={styles.actionButton}
@@ -172,7 +179,7 @@ export const ExampleLibraryApps = () => {
</button>
</div>
</div>
<div className={styles.appDetails}>
<div className={`${styles.appDetails} text-bolt-elements-textPrimary`}>
<div className={styles.detailRow}>
<span className={styles.detailLabel}>Created:</span>
<span className={styles.detailValue}>{new Date(app.createdAt).toLocaleString()}</span>
@@ -189,13 +196,13 @@ export const ExampleLibraryApps = () => {
<span className={styles.detailLabel}>Database:</span>
<span className={styles.detailValue}>{app.outcome.hasDatabase ? 'Present' : 'None'}</span>
</div>
<div className="text-lg font-semibold mb-2">Test Results</div>
<div className="text-lg font-semibold mb-2 text-bolt-elements-textPrimary">Test Results</div>
{testResults && (
<div className="flex flex-col gap-2">
{testResults.map((result) => (
<div key={result.title} className="flex items-center gap-2">
<div
className={classNames('w-3 h-3 rounded-full border border-black', {
className={classNames('w-3 h-3 rounded-full border border-bolt-elements-borderColor', {
'bg-green-500': result.status === 'Pass',
'bg-red-500': result.status === 'Fail',
'bg-gray-300': result.status === 'NotRun',
@@ -204,20 +211,20 @@ export const ExampleLibraryApps = () => {
{result.recordingId ? (
<a
href={`https://app.replay.io/recording/${result.recordingId}`}
className="underline hover:text-blue-600"
className="text-bolt-elements-textPrimary hover:text-bolt-elements-textSecondary"
target="_blank"
rel="noopener noreferrer"
>
{result.title}
</a>
) : (
<div>{result.title}</div>
<div className="text-bolt-elements-textPrimary">{result.title}</div>
)}
</div>
))}
</div>
)}
{!testResults && <div>Loading...</div>}
{!testResults && <div className="text-bolt-elements-textPrimary">Loading...</div>}
</div>
</div>
);