Skip to content

Commit de8841f

Browse files
iamjr15iamjr15
committed
ui changes
1 parent b1c74fd commit de8841f

File tree

1 file changed

+99
-41
lines changed

1 file changed

+99
-41
lines changed

‎frontend/src/components/integrations/pipedream/pipedream-registry.tsx‎

Lines changed: 99 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -166,30 +166,37 @@ export const PipedreamRegistry: React.FC<PipedreamRegistryProps> = ({
166166
const [selectedProfileId, setSelectedProfileId] = useState<string | null>(null);
167167

168168
return (
169-
<Card className="group transition-all duration-200 hover:shadow-md border-border/30 hover:border-border bg-card/50 hover:bg-card">
170-
<CardContent className="p-5">
169+
<Card className="group transition-all duration-200 hover:shadow-lg border border-border hover:border-primary/20 bg-card hover:bg-card/95 h-full">
170+
<CardContent className="p-5 h-full">
171171
<div className="flex flex-col h-full">
172172
{/* App Icon and Name */}
173-
<div className="flex items-start gap-3 mb-3">
173+
<div className="flex items-start gap-3 mb-4">
174174
<div className="flex-shrink-0">
175175
<AppIcon app={app} />
176176
</div>
177177
<div className="flex-1 min-w-0">
178-
<h3 className="font-semibold text-base text-foreground truncate">{app.name}</h3>
178+
<h3 className="font-semibold text-base text-foreground truncate leading-tight">{app.name}</h3>
179+
{app.categories.length > 0 && (
180+
<p className="text-xs text-muted-foreground mt-1 truncate">
181+
{app.categories[0]}
182+
</p>
183+
)}
179184
</div>
180185
</div>
181186

182187
{/* Description */}
183-
<p className="text-sm text-muted-foreground line-clamp-3 mb-3 flex-1">
188+
<p className="text-sm text-muted-foreground line-clamp-2 mb-4 flex-1 leading-relaxed">
184189
{app.description}
185190
</p>
186191

187-
{/* Authentication Type */}
188-
<div className="mb-4">
189-
<Badge variant="secondary" className="text-xs">
190-
{app.auth_type === 'oauth' ? 'OAuth' : 'API Key'}
191-
</Badge>
192-
</div>
192+
{/* Featured Badge */}
193+
{app.featured_weight > 100000 && (
194+
<div className="mb-4">
195+
<Badge variant="default" className="text-xs bg-primary/10 text-primary border-primary/20">
196+
Featured
197+
</Badge>
198+
</div>
199+
)}
193200

194201
{/* Connection Status */}
195202
<div className="mt-auto">
@@ -247,8 +254,8 @@ export const PipedreamRegistry: React.FC<PipedreamRegistryProps> = ({
247254

248255
return (
249256
<div className="h-full max-h-[80vh]">
250-
<div className="flex flex-col overflow-hidden h-full">
251-
<div className="p-6 border-b border-border bg-background">
257+
<div className="flex flex-col h-full max-h-[calc(100vh-200px)]">
258+
<div className="p-6 border-b border-border bg-card">
252259
<div className="mb-6">
253260
<h2 className="text-xl font-semibold mb-2">Browse Apps</h2>
254261
<p className="text-sm text-muted-foreground">
@@ -263,12 +270,12 @@ export const PipedreamRegistry: React.FC<PipedreamRegistryProps> = ({
263270
placeholder="Search apps..."
264271
value={search}
265272
onChange={(e) => handleSearch(e.target.value)}
266-
className="pl-10 h-11 bg-muted/30 border-0 focus:bg-background transition-colors"
273+
className="pl-10 h-11 bg-background border border-border focus:border-primary transition-colors"
267274
/>
268275
</div>
269276
</form>
270277
</div>
271-
<div className="flex-1 overflow-auto p-6">
278+
<div className="flex-1 overflow-y-auto p-6 bg-background">
272279
{isLoading && (
273280
<div className="flex items-center justify-center py-12">
274281
<div className="flex items-center gap-2">
@@ -280,24 +287,55 @@ export const PipedreamRegistry: React.FC<PipedreamRegistryProps> = ({
280287

281288
{!isLoading && appsData?.apps && appsData.apps.length > 0 && (
282289
<>
283-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
284-
{appsData.apps.map((app: PipedreamApp) => (
285-
<AppCard key={app.id} app={app} />
286-
))}
287-
</div>
290+
{/* Featured Apps Section - only show on first page with no search */}
291+
{page === 1 && !search && (
292+
<>
293+
<div className="mb-8">
294+
<div className="flex items-center gap-2 mb-4">
295+
<h3 className="text-lg font-semibold text-foreground">Featured Apps</h3>
296+
<Badge variant="outline" className="text-xs">Popular</Badge>
297+
</div>
298+
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4 max-w-full">
299+
{appsData.apps.filter(app => app.featured_weight > 100000).slice(0, 8).map((app: PipedreamApp) => (
300+
<AppCard key={`featured-${app.id}`} app={app} />
301+
))}
302+
</div>
303+
</div>
304+
305+
{/* All Apps Section */}
306+
<div className="mb-6">
307+
<h3 className="text-lg font-semibold text-foreground mb-4">All Apps</h3>
308+
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4 max-w-full">
309+
{appsData.apps.map((app: PipedreamApp) => (
310+
<AppCard key={app.id} app={app} />
311+
))}
312+
</div>
313+
</div>
314+
</>
315+
)}
316+
317+
{/* Regular view for search results or subsequent pages */}
318+
{(page > 1 || search) && (
319+
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4 max-w-full">
320+
{appsData.apps.map((app: PipedreamApp) => (
321+
<AppCard key={app.id} app={app} />
322+
))}
323+
</div>
324+
)}
288325

289326
{appsData.page_info && appsData.page_info.end_cursor && (
290-
<div className="flex justify-center pt-4">
327+
<div className="flex justify-center pt-8">
291328
<Button
292329
onClick={() => setPage(page + 1)}
293330
disabled={isLoading}
294-
variant="outline"
295-
size="sm"
331+
variant="default"
332+
size="lg"
333+
className="px-8 py-2 bg-primary hover:bg-primary/90 text-primary-foreground"
296334
>
297335
{isLoading ? (
298336
<>
299-
<Loader2 className="h-3 w-3 animate-spin mr-2" />
300-
Loading...
337+
<Loader2 className="h-4 w-4 animate-spin mr-2" />
338+
Loading more apps...
301339
</>
302340
) : (
303341
'Load More Apps'
@@ -309,22 +347,42 @@ export const PipedreamRegistry: React.FC<PipedreamRegistryProps> = ({
309347
)}
310348

311349
{!isLoading && appsData?.apps && appsData.apps.length === 0 && (
312-
<div className="text-center py-8">
313-
<div className="text-3xl mb-3">🔍</div>
314-
<h3 className="text-base font-medium mb-2">No apps found</h3>
315-
<p className="text-sm text-muted-foreground mb-3">
316-
Try adjusting your search criteria
317-
</p>
318-
<Button
319-
onClick={() => {
320-
setSearch('');
321-
setPage(1);
322-
}}
323-
variant="outline"
324-
size="sm"
325-
>
326-
Clear Search
327-
</Button>
350+
<div className="text-center py-12 bg-card border border-border rounded-lg mx-4">
351+
<div className="max-w-md mx-auto">
352+
<Search className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
353+
<h3 className="text-lg font-semibold mb-2">No apps found</h3>
354+
<p className="text-muted-foreground mb-6">
355+
No apps match your search criteria. Try adjusting your search terms.
356+
</p>
357+
<Button
358+
onClick={() => {
359+
setSearch('');
360+
setPage(1);
361+
}}
362+
variant="default"
363+
className="px-6"
364+
>
365+
<Search className="h-4 w-4 mr-2" />
366+
View All Apps
367+
</Button>
368+
</div>
369+
</div>
370+
)}
371+
372+
{!isLoading && error && (
373+
<div className="text-center py-12 bg-card border border-destructive/20 rounded-lg mx-4">
374+
<div className="max-w-md mx-auto">
375+
<div className="h-12 w-12 bg-destructive/10 rounded-full flex items-center justify-center mx-auto mb-4">
376+
<span className="text-destructive text-xl">⚠</span>
377+
</div>
378+
<h3 className="text-lg font-semibold mb-2 text-destructive">Failed to load apps</h3>
379+
<p className="text-muted-foreground mb-6">
380+
There was an error loading the apps. Please try again.
381+
</p>
382+
<Button variant="default" onClick={() => refetch()} className="px-6">
383+
Try Again
384+
</Button>
385+
</div>
328386
</div>
329387
)}
330388
</div>

0 commit comments

Comments
 (0)