Skip to content

Commit 539bb5e

Browse files
awisniew207awisniew207
committed
chore(dashboard): ui updates pt6 - explorer
1 parent 26282ef commit 539bb5e

38 files changed

+1522
-852
lines changed

‎packages/apps/app-dashboard/.env.example‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,3 +22,5 @@ VITE_LIT_FEATURE_ENV=
2222
VITE_DASHBOARD_URL=http://localhost:5173
2323

2424
VITE_ENV=development
25+
26+
VITE_FEATURED_APP_IDS=

‎packages/apps/app-dashboard/index.html‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,11 @@
55

66
<!-- Preload hero image for better LCP -->
77
<link rel="preload" as="image" href="/vincent-main-logo.png" fetchpriority="high">
8-
8+
9+
<!-- Fonts -->
10+
<link rel="stylesheet" href="/fonts/itc-avant-garde/medium/style.css">
11+
<link rel="stylesheet" href="/fonts/encode-sans-semi-expanded/style.css">
12+
913
<!-- Favicon -->
1014
<link rel="icon" href="/favicon.png" type="image/png" />
1115
<link rel="icon" type="image/png" sizes="32x32" href="/favicon.png" />

‎packages/apps/app-dashboard/src/components/explorer/ui/AbilityInfoView.tsx‎

Lines changed: 39 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { AppVersionAbility, Ability } from '@/types/developer-dashboard/appTypes
33
import { AbilityVersionPoliciesWrapper } from '../wrappers/ui/AbilityVersionPolicyWrapper';
44
import { Logo } from '@/components/shared/ui/Logo';
55
import { useState } from 'react';
6+
import { theme, fonts } from '@/components/user-dashboard/connect/ui/theme';
67

78
interface AbilityInfoViewProps {
89
appVersionAbility: AppVersionAbility;
@@ -20,52 +21,64 @@ export function AbilityInfoView({ appVersionAbility, ability }: AbilityInfoViewP
2021
<div key={ability.packageName} className="space-y-3">
2122
{/* Clickable Ability Card */}
2223
<div
23-
className="group/ability p-5 rounded-xl bg-black/[0.02] border border-black/5 hover:border-black/10 cursor-pointer transition-all duration-300"
24+
className={`group/ability p-5 rounded-xl ${theme.itemBg} border ${theme.cardBorder} ${theme.cardHoverBorder} cursor-pointer transition-all duration-300`}
2425
onClick={() => handleAbilityClick(ability.packageName)}
2526
>
2627
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
2728
<div className="flex items-center gap-4">
28-
<div className="w-10 h-10 rounded-lg bg-black/5 border border-black/5 group-hover/ability:border-black/10 transition-all duration-300 flex items-center justify-center overflow-hidden">
29+
<div
30+
className={`w-10 h-10 rounded-lg ${theme.iconBg} border ${theme.iconBorder} ${theme.cardHoverBorder} transition-all duration-300 flex items-center justify-center overflow-hidden`}
31+
>
2932
{ability.logo ? (
3033
<Logo
3134
logo={ability.logo}
3235
alt={`${ability.title || ability.packageName} logo`}
3336
className="w-full h-full object-contain"
3437
/>
3538
) : (
36-
<Wrench className="w-4 h-4 text-black/40" />
39+
<Wrench className={`w-4 h-4 ${theme.textMuted}`} />
3740
)}
3841
</div>
3942
<div className="flex-1">
40-
<p className="text-base font-light text-black/90">
41-
{ability.title || ability.packageName}
42-
</p>
43-
<a
44-
href={`https://www.npmjs.com/package/${ability.packageName}/v/${ability.activeVersion}`}
45-
target="_blank"
46-
rel="noopener noreferrer"
47-
className="hover:opacity-75 transition-opacity"
48-
title={`View ${ability.packageName} v${ability.activeVersion} on npm`}
49-
onClick={(e) => e.stopPropagation()}
50-
>
51-
<div className="w-5 h-5 flex items-center justify-center">
52-
<img src="/npm.png" alt="npm" className="w-full h-full object-contain" />
53-
</div>
54-
</a>
43+
<div className="flex items-center gap-2">
44+
<p className={`text-base font-medium ${theme.text}`} style={fonts.heading}>
45+
{ability.title || ability.packageName}
46+
</p>
47+
<a
48+
href={`https://www.npmjs.com/package/${ability.packageName}/v/${ability.activeVersion}`}
49+
target="_blank"
50+
rel="noopener noreferrer"
51+
className="hover:opacity-75 transition-opacity"
52+
title={`View ${ability.packageName} v${ability.activeVersion} on npm`}
53+
onClick={(e) => e.stopPropagation()}
54+
>
55+
<div className="w-5 h-5 flex items-center justify-center">
56+
<img src="/npm.png" alt="npm" className="w-full h-full object-contain" />
57+
</div>
58+
</a>
59+
</div>
5560
{ability.description && (
56-
<p className="text-sm text-gray-600 mt-1 leading-relaxed">{ability.description}</p>
61+
<p className={`text-sm ${theme.textMuted} mt-1 leading-relaxed`} style={fonts.body}>
62+
{ability.description}
63+
</p>
5764
)}
5865
</div>
5966
</div>
6067

6168
<div className="flex items-center gap-3">
6269
{appVersionAbility.hiddenSupportedPolicies &&
6370
appVersionAbility.hiddenSupportedPolicies.length > 0 && (
64-
<span className="px-3 py-1 bg-black/5 text-black/60 text-xs rounded-full border border-black/10">
71+
<span
72+
className={`px-3 py-1 ${theme.itemBg} ${theme.textMuted} text-xs rounded-full border ${theme.cardBorder}`}
73+
style={fonts.heading}
74+
>
6575
{appVersionAbility.hiddenSupportedPolicies.length} Hidden Policies
6676
</span>
6777
)}
68-
<span className="text-xs text-black/70 hover:text-black bg-black/5 hover:bg-black/10 font-medium flex items-center gap-1 transition-all duration-300 px-2 py-1 rounded-md">
78+
<span
79+
className={`text-xs ${theme.textMuted} hover:${theme.text} ${theme.itemBg} ${theme.itemHoverBg} font-medium flex items-center gap-1 transition-all duration-300 px-2 py-1 rounded-md`}
80+
style={fonts.heading}
81+
>
6982
{expandedAbility === appVersionAbility.abilityPackageName ? (
7083
<>
7184
Hide policies <ChevronUp className="w-3 h-3" />
@@ -82,11 +95,14 @@ export function AbilityInfoView({ appVersionAbility, ability }: AbilityInfoViewP
8295

8396
{/* Ability Policies - Show below the ability card when expanded */}
8497
{expandedAbility === appVersionAbility.abilityPackageName && (
85-
<div className="ml-4 pl-4 border-l-2 !border-orange-500/50 animate-fadeIn">
98+
<div
99+
className="ml-4 pl-4 border-l-2 animate-fadeIn"
100+
style={{ borderColor: theme.brandOrange }}
101+
>
86102
{appVersionAbility.abilityVersion ? (
87103
<AbilityVersionPoliciesWrapper appAbilityVersion={appVersionAbility} />
88104
) : (
89-
<p className="text-sm text-gray-600">
105+
<p className={`text-sm ${theme.textMuted}`} style={fonts.body}>
90106
No policy information available for this ability.
91107
</p>
92108
)}

‎packages/apps/app-dashboard/src/components/explorer/ui/ActiveAppVersion.tsx‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { TabsContent } from '@/components/shared/ui/tabs';
22
import { Database, Layers } from 'lucide-react';
33
import { App, AppVersion, AppVersionAbility } from '@/types/developer-dashboard/appTypes';
44
import { AbilityInfoWrapper } from '../wrappers/ui/AbilityInfoWrapper';
5+
import { theme, fonts } from '@/components/user-dashboard/connect/ui/theme';
56

67
export function ActiveAppVersion({
78
versions,
@@ -26,8 +27,8 @@ export function ActiveAppVersion({
2627
{/* Version Abilities*/}
2728
<div>
2829
<div className="flex items-center gap-3 mb-4">
29-
<Layers className="w-4 h-4 text-black/40" />
30-
<span className="text-sm font-light text-gray-600">
30+
<Layers className={`w-4 h-4 ${theme.textMuted}`} />
31+
<span className={`text-sm font-medium ${theme.textMuted}`} style={fonts.heading}>
3132
Integrated Abilities ({activeVersionAbilities.length})
3233
</span>
3334
</div>
@@ -44,16 +45,22 @@ export function ActiveAppVersion({
4445
})}
4546
</div>
4647
) : (
47-
<div className="p-8 rounded-xl bg-black/[0.02] border border-black/5 text-center">
48-
<Database className="w-10 h-10 text-black/20 mx-auto mb-3" />
49-
<p className="text-gray-500 text-sm">No abilities configured for this version</p>
48+
<div
49+
className={`p-8 rounded-xl ${theme.itemBg} border ${theme.cardBorder} text-center`}
50+
>
51+
<Database className={`w-10 h-10 ${theme.textMuted} mx-auto mb-3`} />
52+
<p className={`${theme.textMuted} text-sm`} style={fonts.body}>
53+
No abilities configured for this version
54+
</p>
5055
</div>
5156
)}
5257
</div>
5358
</div>
5459
) : (
55-
<div className="p-8 text-center">
56-
<p className="text-gray-500">No active version found</p>
60+
<div className={`p-8 rounded-xl ${theme.itemBg} border ${theme.cardBorder} text-center`}>
61+
<p className={`${theme.textMuted} text-sm`} style={fonts.body}>
62+
No active version found
63+
</p>
5764
</div>
5865
)}
5966
</TabsContent>

‎packages/apps/app-dashboard/src/components/explorer/ui/AllAppVersions.tsx‎

Lines changed: 26 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,43 +2,60 @@ import { TabsContent } from '@/components/shared/ui/tabs';
22
import { App, AppVersion } from '@/types/developer-dashboard/appTypes';
33
import { FileText } from 'lucide-react';
44
import { Tag } from 'lucide-react';
5+
import { theme, fonts } from '@/components/user-dashboard/connect/ui/theme';
56

67
interface AllAppVersionsProps {
78
versions: AppVersion[];
89
app: App;
910
}
1011

1112
export function AllAppVersions({ versions, app }: AllAppVersionsProps) {
13+
// Sort versions to show active version first, then others
14+
const sortedVersions = [...versions].sort((a, b) => {
15+
if (a.version === app.activeVersion) return -1;
16+
if (b.version === app.activeVersion) return 1;
17+
return 0;
18+
});
19+
1220
return (
1321
<TabsContent value="all" className="mt-0">
1422
{/* All Versions View */}
1523
<div className="space-y-3">
16-
{versions.map((version) => (
24+
{sortedVersions.map((version) => (
1725
<div
1826
key={version.version}
19-
className="group/version p-5 rounded-xl bg-black/[0.02] hover:bg-black/[0.04] border border-black/5 hover:border-black/10 transition-all duration-300"
27+
className={`group/version p-5 rounded-xl ${theme.itemBg} ${theme.itemHoverBg} border ${theme.cardBorder} ${theme.cardHoverBorder} transition-all duration-300`}
2028
>
2129
<div className="flex items-start justify-between mb-4">
2230
<div className="flex items-center gap-4">
2331
<div className="flex items-center gap-3">
24-
<Tag className="w-4 h-4 text-black/40" />
25-
<span className="text-lg font-light text-black/90">v{version.version}</span>
32+
<Tag className={`w-4 h-4 ${theme.textMuted}`} />
33+
<span className={`text-lg font-medium ${theme.text}`} style={fonts.heading}>
34+
v{version.version}
35+
</span>
2636
</div>
2737
{version.version === app.activeVersion && (
28-
<span className="px-3 py-1 bg-orange-100 text-orange-600 border-orange-200 text-xs rounded-full border font-semibold">
38+
<span
39+
className="px-3 py-1 text-white text-xs rounded-full font-semibold"
40+
style={{ ...fonts.heading, backgroundColor: theme.brandOrange }}
41+
>
2942
ACTIVE
3043
</span>
3144
)}
3245
</div>
3346
</div>
3447

3548
{version.changes && (
36-
<div className="mt-4 p-4 rounded-lg bg-black/[0.02] border border-black/5">
49+
<div className={`mt-4 p-4 rounded-lg ${theme.itemBg} border ${theme.cardBorder}`}>
3750
<div className="flex items-center gap-2 mb-2">
38-
<FileText className="w-3 h-3 text-black/40" />
39-
<span className="text-xs font-medium text-gray-500">Changes</span>
51+
<FileText className={`w-3 h-3 ${theme.textMuted}`} />
52+
<span className={`text-xs font-medium ${theme.textMuted}`} style={fonts.heading}>
53+
Changes
54+
</span>
4055
</div>
41-
<p className="text-sm text-gray-600 leading-relaxed">{version.changes}</p>
56+
<p className={`text-sm ${theme.textMuted} leading-relaxed`} style={fonts.body}>
57+
{version.changes}
58+
</p>
4259
</div>
4360
)}
4461
</div>

‎packages/apps/app-dashboard/src/components/explorer/ui/AppFilter.tsx‎

Lines changed: 50 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Search, Filter } from 'lucide-react';
2+
import { theme, fonts } from '@/components/user-dashboard/connect/ui/theme';
23

34
export function AppFilter({
45
searchQuery,
@@ -17,44 +18,80 @@ export function AppFilter({
1718
}) {
1819
return (
1920
<div className="relative group">
20-
<div className="absolute inset-0 bg-black/5 rounded-2xl blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-700"></div>
21-
<div className="relative bg-white/40 backdrop-blur-xl border border-black/10 rounded-2xl p-6 hover:border-black/20 transition-all duration-500">
21+
<div
22+
className={`relative ${theme.mainCard} border ${theme.mainCardBorder} rounded-2xl p-6 ${theme.cardHoverBorder} transition-all duration-500`}
23+
>
2224
<div className="flex flex-col lg:flex-row items-center gap-4">
2325
{/* Search Input */}
2426
<div className="relative flex-1">
25-
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-black/40" />
27+
<Search
28+
className={`absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 ${theme.textMuted}`}
29+
/>
2630
<input
2731
type="text"
2832
placeholder="Search applications..."
2933
value={searchQuery}
3034
onChange={(e) => setSearchQuery(e.target.value)}
31-
className="w-full pl-10 pr-4 py-3 rounded-xl bg-white/50 border border-black/10 focus:border-black/20 text-black placeholder-gray-500 transition-all duration-300 focus:outline-none"
35+
className={`w-full pl-10 pr-4 py-3 rounded-xl ${theme.itemBg} border ${theme.cardBorder} ${theme.text} ${theme.textMuted} transition-all duration-300 focus:outline-none`}
36+
style={fonts.body}
3237
/>
3338
</div>
3439

3540
{/* Filter Controls */}
3641
<div className="flex items-center gap-3">
3742
<div className="flex items-center gap-2">
38-
<Filter className="w-4 h-4 text-black/40" />
43+
<Filter className={`w-4 h-4 ${theme.textMuted}`} />
3944
<select
4045
value={statusFilter}
4146
onChange={(e) => setStatusFilter(e.target.value)}
42-
className="px-3 py-2 rounded-lg bg-white/50 border border-black/10 text-black text-sm transition-all duration-300 focus:outline-none focus:border-black/20"
47+
className={`px-3 py-2 rounded-lg bg-white dark:bg-gray-900 border ${theme.cardBorder} ${theme.text} text-sm transition-all duration-300 focus:outline-none hover:border-gray-300 dark:hover:border-white/20 cursor-pointer`}
48+
style={fonts.heading}
4349
>
44-
<option value="all">All Status</option>
45-
<option value="prod">Live</option>
46-
<option value="test">Beta</option>
50+
<option
51+
value="all"
52+
className="bg-white dark:bg-gray-900 text-gray-900 dark:text-white"
53+
>
54+
All Status
55+
</option>
56+
<option
57+
value="prod"
58+
className="bg-white dark:bg-gray-900 text-gray-900 dark:text-white"
59+
>
60+
Live
61+
</option>
62+
<option
63+
value="test"
64+
className="bg-white dark:bg-gray-900 text-gray-900 dark:text-white"
65+
>
66+
Beta
67+
</option>
4768
</select>
4869
</div>
4970

5071
<select
5172
value={sortBy}
5273
onChange={(e) => setSortBy(e.target.value)}
53-
className="px-3 py-2 rounded-lg bg-white/50 border border-black/10 text-black text-sm transition-all duration-300 focus:outline-none focus:border-black/20"
74+
className={`px-3 py-2 rounded-lg bg-white dark:bg-gray-900 border ${theme.cardBorder} ${theme.text} text-sm transition-all duration-300 focus:outline-none hover:border-gray-300 dark:hover:border-white/20 cursor-pointer`}
75+
style={fonts.heading}
5476
>
55-
<option value="name">Sort by Name</option>
56-
<option value="updated">Sort by Updated</option>
57-
<option value="version">Sort by Version</option>
77+
<option
78+
value="name"
79+
className="bg-white dark:bg-gray-900 text-gray-900 dark:text-white"
80+
>
81+
Sort by Name
82+
</option>
83+
<option
84+
value="updated"
85+
className="bg-white dark:bg-gray-900 text-gray-900 dark:text-white"
86+
>
87+
Sort by Updated
88+
</option>
89+
<option
90+
value="version"
91+
className="bg-white dark:bg-gray-900 text-gray-900 dark:text-white"
92+
>
93+
Sort by Version
94+
</option>
5895
</select>
5996
</div>
6097
</div>

0 commit comments

Comments
 (0)