Skip to content

Commit 588ee87

Browse files
Abhra0404Abhra0404
committed
feat: UI density refinements + strict Supabase config
Tighter, more information-dense UI across dashboard, repo, analytics, profile, resources and learning-path pages, plus a small but breaking cleanup that removes the local "guest mode" Supabase stub. Highlights - Dashboard: trimmed StatsCard / RepoCard / LanguageChart / ActivityFeed paddings, type ramps and chart heights for a denser layout. - ActivityFeed: 5 items with time/repo/type metadata pills, description quote and a "Live" status badge. - RepoDetail: scaled down hero and IndustrialMetric blocks, removed the README section, formatted star counts with toLocaleString(), and recolored the Global_Star_Array card so the count is readable. - Resources: redesigned the Big Industrial Stat with a status bar header, pulsing indicator, dynamic counts and a scroll-to-top CTA. - LearningPathPage: Completion Milestone redesigned (status bar, trophy seal with corner ticks, 100% indigo tag, 3-stat row, Next_Archive / Reset_Progress CTAs). - BottomNav: page labels are always visible. - Header / RepoCard: added aria-labels for logout and external links. - tsconfig.app.json: added "ignoreDeprecations": "6.0". Breaking - Removed the Supabase guest-mode stub and isSupabaseConfigured flag. src/lib/supabase.ts now throws if VITE_SUPABASE_URL or VITE_SUPABASE_ANON_KEY is missing. The app now requires real Supabase credentials and a running backend to boot.
1 parent abafd11 commit 588ee87

18 files changed

Lines changed: 609 additions & 455 deletions

‎package-lock.json‎

Lines changed: 0 additions & 8 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/CourseCard.tsx‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -18,24 +18,24 @@ export function CourseCard({ id, title, tagline, category, difficulty, duration,
1818

1919
return (
2020
<motion.div
21-
className="surgical-card p-10 flex flex-col justify-between h-full bg-white relative group"
21+
className="surgical-card p-6 flex flex-col justify-between h-full bg-white relative group"
2222
>
23-
<div className="space-y-8">
24-
<div className="flex items-center justify-between border-b-2 border-black pb-6">
25-
<span className="px-3 py-1 bg-zinc-100 border border-black font-black text-[9px] uppercase tracking-widest">
23+
<div className="space-y-5">
24+
<div className="flex items-center justify-between border-b-2 border-black pb-3">
25+
<span className="px-2 py-0.5 bg-zinc-100 border border-black font-black text-[8px] uppercase tracking-widest">
2626
{difficulty}
2727
</span>
28-
<div className="flex items-center gap-2 text-zinc-500 font-black text-[10px] uppercase tracking-widest">
29-
<Clock size={14} strokeWidth={3} />
28+
<div className="flex items-center gap-1.5 text-zinc-500 font-black text-[9px] uppercase tracking-widest">
29+
<Clock size={11} strokeWidth={3} />
3030
{duration}
3131
</div>
3232
</div>
3333

34-
<div className="space-y-4">
35-
<h4 className="text-2xl font-black tracking-tighter uppercase group-hover:text-accent-indigo transition-colors leading-[0.9]">
34+
<div className="space-y-2.5">
35+
<h4 className="text-base font-black tracking-tighter uppercase group-hover:text-accent-indigo transition-colors leading-tight">
3636
{title}
3737
</h4>
38-
<p className="text-sm text-zinc-500 font-bold italic line-clamp-3 leading-relaxed border-l-4 border-black/5 pl-4">
38+
<p className="text-xs text-zinc-500 font-bold italic line-clamp-3 leading-relaxed border-l-2 border-black/5 pl-3">
3939
"{tagline}"
4040
</p>
4141
</div>
@@ -45,14 +45,14 @@ export function CourseCard({ id, title, tagline, category, difficulty, duration,
4545
</div>
4646
</div>
4747

48-
<div className="mt-12 space-y-6">
48+
<div className="mt-6 space-y-3">
4949
{/* Progress Bar */}
50-
<div className="space-y-2">
50+
<div className="space-y-1.5">
5151
<div className="flex justify-between items-center text-[9px] font-black uppercase tracking-widest">
5252
<span className="text-zinc-500">Integrity</span>
5353
<span className="text-black">{completionPercentage}%</span>
5454
</div>
55-
<div className="h-4 bg-zinc-100 border-2 border-black overflow-hidden p-[2px]">
55+
<div className="h-2.5 bg-zinc-100 border-2 border-black overflow-hidden p-[1px]">
5656
<motion.div
5757
initial={{ width: 0 }}
5858
animate={{ width: `${completionPercentage}%` }}
@@ -64,10 +64,10 @@ export function CourseCard({ id, title, tagline, category, difficulty, duration,
6464

6565
<Link
6666
to={`/learning-path/${id}`}
67-
className="w-full py-5 bg-white border-4 border-black font-black text-[10px] uppercase tracking-widest text-black flex items-center justify-center gap-3 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:shadow-none hover:translate-x-[2px] hover:translate-y-[2px] transition-all"
67+
className="w-full py-3 bg-white border-2 border-black font-black text-[10px] uppercase tracking-widest text-black flex items-center justify-center gap-2 shadow-[3px_3px_0px_0px_rgba(0,0,0,1)] hover:shadow-none hover:translate-x-[2px] hover:translate-y-[2px] transition-all"
6868
>
6969
{progress > 0 ? 'Resume_Module' : 'Init_Module'}
70-
<ChevronRight size={16} strokeWidth={3} />
70+
<ChevronRight size={12} strokeWidth={3} />
7171
</Link>
7272
</div>
7373
</motion.div>

‎src/components/dashboard/ActivityFeed.tsx‎

Lines changed: 32 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -15,68 +15,75 @@ export function ActivityFeed() {
1515
const { data: activities, isLoading } = useActivity();
1616

1717
return (
18-
<div className="surgical-card p-10 bg-white h-full min-h-[480px] relative overflow-hidden group">
19-
<div className="flex justify-between items-center mb-12 border-b-2 border-black pb-6">
18+
<div className="surgical-card p-6 bg-white relative overflow-hidden group">
19+
<div className="flex justify-between items-center mb-5 border-b-2 border-black pb-3">
2020
<div>
21-
<h3 className="text-3xl font-black tracking-tighter text-black uppercase leading-none">Recent <br /><span className="text-accent-indigo italic">Activity</span></h3>
22-
<p className="text-[10px] text-zinc-500 uppercase tracking-[0.4em] font-black mt-4">Verified_Telemetry_Pulse</p>
21+
<h3 className="text-lg font-black tracking-tighter text-black uppercase leading-none">Recent <span className="text-accent-indigo italic">Activity</span></h3>
22+
<p className="text-[9px] text-zinc-500 uppercase tracking-[0.3em] font-black mt-1.5">Verified_Telemetry_Pulse</p>
2323
</div>
24+
<span className="px-2 py-0.5 border border-black bg-zinc-50 text-[8px] font-black uppercase tracking-widest text-zinc-500">
25+
Live
26+
</span>
2427
</div>
2528

26-
<div className="relative space-y-12 before:absolute before:inset-0 before:left-[21px] before:w-[2px] before:bg-black/10">
29+
<div className="relative space-y-5 before:absolute before:inset-0 before:left-[15px] before:w-[2px] before:bg-black/10">
2730
{isLoading ? (
28-
[...Array(4)].map((_, i) => (
29-
<div key={i} className="relative pl-16 animate-pulse">
30-
<div className="absolute left-0 w-12 h-12 border-2 border-black/5 bg-zinc-50" />
31-
<div className="space-y-4 mt-1">
31+
[...Array(5)].map((_, i) => (
32+
<div key={i} className="relative pl-12 animate-pulse">
33+
<div className="absolute left-0 w-8 h-8 border-2 border-black/5 bg-zinc-50" />
34+
<div className="space-y-2 mt-1">
3235
<div className="h-2 w-20 bg-black/5" />
33-
<div className="h-4 w-full bg-black/5" />
36+
<div className="h-3 w-full bg-black/5" />
37+
<div className="h-2 w-3/4 bg-black/5" />
3438
</div>
3539
</div>
3640
))
3741
) : activities && activities.length > 0 ? (
38-
activities.map((item, index) => {
42+
activities.slice(0, 5).map((item, index) => {
3943
const config = iconMap[item.type] || iconMap.other;
4044
const { Icon, color } = config;
4145
return (
4246
<motion.div
4347
key={item.id}
4448
initial={{ opacity: 0, x: -10 }}
4549
whileInView={{ opacity: 1, x: 0 }}
46-
transition={{ delay: index * 0.1 }}
50+
transition={{ delay: index * 0.08 }}
4751
viewport={{ once: true }}
48-
className="relative pl-16 group/item"
52+
className="relative pl-12 group/item"
4953
>
5054
{/* Timeline Indicator */}
51-
<div className="absolute left-0 w-12 h-12 border-2 border-black bg-white flex items-center justify-center transition-all duration-300 group-hover/item:bg-black group-hover/item:text-white z-10">
52-
<Icon size={20} className={cn("transition-colors", color)} strokeWidth={3} />
55+
<div className="absolute left-0 w-8 h-8 border-2 border-black bg-white flex items-center justify-center transition-all duration-300 group-hover/item:bg-black group-hover/item:text-white z-10">
56+
<Icon size={14} className={cn("transition-colors", color)} strokeWidth={3} />
5357
</div>
5458

55-
<div className="space-y-3">
56-
<div className="flex items-center gap-4">
57-
<span className="px-3 py-1 border border-black/10 bg-zinc-50 text-[9px] font-black text-zinc-400 uppercase tracking-widest">
59+
<div className="space-y-2">
60+
<div className="flex items-center gap-2 flex-wrap">
61+
<span className="px-1.5 py-0.5 border border-black/10 bg-zinc-50 text-[8px] font-black text-zinc-400 uppercase tracking-widest">
5862
{item.time}
5963
</span>
60-
<span className="px-3 py-1 border border-black/10 bg-zinc-50 text-[9px] font-black text-black uppercase tracking-widest truncate max-w-[150px]">
64+
<span className="px-1.5 py-0.5 border border-black/10 bg-zinc-50 text-[8px] font-black text-black uppercase tracking-widest truncate max-w-[160px]">
6165
{item.repo}
6266
</span>
67+
<span className={cn("px-1.5 py-0.5 border border-black/10 bg-zinc-50 text-[8px] font-black uppercase tracking-widest", color)}>
68+
{item.type}
69+
</span>
6370
</div>
64-
<h4 className="text-lg font-black text-black group-hover/item:text-accent-indigo transition-colors leading-none tracking-tight uppercase">
71+
<h4 className="text-sm font-black text-black group-hover/item:text-accent-indigo transition-colors leading-tight tracking-tight uppercase">
6572
{item.title}
6673
</h4>
67-
<p className="text-sm text-zinc-400 font-bold italic leading-relaxed border-l-4 border-black/5 pl-4">
74+
<p className="text-[11px] text-zinc-500 font-bold italic leading-relaxed border-l-2 border-black/10 pl-2.5">
6875
"{item.description}"
6976
</p>
7077
</div>
7178
</motion.div>
7279
);
7380
})
7481
) : (
75-
<div className="py-24 text-center">
76-
<div className="w-20 h-20 border-4 border-dashed border-black/20 flex items-center justify-center mx-auto mb-8">
77-
<Terminal size={36} className="text-black/10" />
82+
<div className="py-12 text-center">
83+
<div className="w-12 h-12 border-2 border-dashed border-black/20 flex items-center justify-center mx-auto mb-4">
84+
<Terminal size={20} className="text-black/10" />
7885
</div>
79-
<p className="text-[10px] font-black text-zinc-400 uppercase tracking-[0.4em] leading-loose">
86+
<p className="text-[10px] font-black text-zinc-400 uppercase tracking-[0.3em]">
8087
LOGS_NULL: No recent pulse detected.
8188
</p>
8289
</div>

‎src/components/dashboard/LanguageChart.tsx‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -39,28 +39,28 @@ interface LanguageChartProps {
3939
export function LanguageChart({ languages }: LanguageChartProps) {
4040
const data = languages && languages.length > 0 ? languages : DEFAULT_LANGUAGES;
4141
return (
42-
<div className="surgical-card p-10 bg-white relative overflow-hidden group">
43-
<div className="flex justify-between items-center mb-12 border-b-2 border-black pb-6">
42+
<div className="surgical-card p-5 bg-white relative overflow-hidden group">
43+
<div className="flex justify-between items-center mb-4 border-b-2 border-black pb-3">
4444
<div>
45-
<h3 className="text-3xl font-black tracking-tighter text-black uppercase leading-none">Language <br /><span className="text-accent-indigo italic">Distribution</span></h3>
46-
<p className="text-[10px] text-zinc-500 uppercase tracking-[0.4em] font-black mt-4">Architectural_Composition</p>
45+
<h3 className="text-base font-black tracking-tighter text-black uppercase leading-none">Language <span className="text-accent-indigo italic">Distribution</span></h3>
46+
<p className="text-[8px] text-zinc-500 uppercase tracking-[0.3em] font-black mt-1.5">Architectural_Composition</p>
4747
</div>
48-
<Terminal size={32} strokeWidth={3} className="text-zinc-200 group-hover:text-black transition-colors" />
48+
<Terminal size={16} strokeWidth={3} className="text-zinc-200 group-hover:text-black transition-colors" />
4949
</div>
5050

51-
<div className="space-y-12 relative z-10">
51+
<div className="space-y-3 relative z-10">
5252
{data.map((lang, index) => (
53-
<div key={lang.name} className="space-y-4">
53+
<div key={lang.name} className="space-y-1.5">
5454
<div className="flex justify-between items-end">
55-
<span className="text-xs font-black text-black uppercase tracking-widest">{lang.name}</span>
56-
<span className="text-sm font-black text-zinc-400 tracking-tighter">{lang.percentage}%</span>
55+
<span className="text-[10px] font-black text-black uppercase tracking-widest">{lang.name}</span>
56+
<span className="text-[10px] font-black text-zinc-400 tracking-tighter">{lang.percentage}%</span>
5757
</div>
5858

59-
<div className="h-4 w-full border-2 border-black p-[2px] bg-zinc-50">
59+
<div className="h-2 w-full border border-black p-[1px] bg-zinc-50">
6060
<motion.div
6161
initial={{ width: 0 }}
6262
whileInView={{ width: `${lang.percentage}%` }}
63-
transition={{ duration: 1.5, delay: index * 0.1, ease: "circOut" }}
63+
transition={{ duration: 1.2, delay: index * 0.08, ease: "circOut" }}
6464
className="h-full relative"
6565
style={{ backgroundColor: LANGUAGE_COLORS[lang.name] || '#000000' }}
6666
/>
@@ -69,9 +69,9 @@ export function LanguageChart({ languages }: LanguageChartProps) {
6969
))}
7070
</div>
7171

72-
<div className="mt-16 p-8 border-4 border-black bg-zinc-50 relative overflow-hidden">
73-
<div className="relative z-10 text-xs text-zinc-500 leading-relaxed font-bold italic tracking-wide">
74-
"Your stack is balanced with a focus on <span className="text-black font-black not-italic border-b-2 border-black">Modern Standards</span> and <span className="text-black font-black not-italic border-b-2 border-black">System Scalability</span>."
72+
<div className="mt-4 p-3 border-2 border-black bg-zinc-50 relative overflow-hidden">
73+
<div className="relative z-10 text-[10px] text-zinc-500 leading-snug font-bold italic tracking-wide">
74+
"Stack focused on <span className="text-black font-black not-italic border-b border-black">Modern Standards</span> &amp; <span className="text-black font-black not-italic border-b border-black">Scalability</span>."
7575
</div>
7676
<div className="industrial-grid absolute inset-0 opacity-10" />
7777
</div>

‎src/components/dashboard/RepoCard.tsx‎

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -19,42 +19,43 @@ export function RepoCard({ id, name, description, stars, forks, language, url }:
1919
return (
2020
<motion.div
2121
onClick={() => navigate(`/repo/${id}`)}
22-
className="surgical-card p-10 cursor-pointer flex flex-col justify-between group h-full bg-white relative"
22+
className="surgical-card p-6 cursor-pointer flex flex-col justify-between group h-full bg-white relative"
2323
>
24-
<div className="space-y-8">
25-
<div className="flex items-center justify-between border-b-2 border-black pb-6">
26-
<div className="w-12 h-12 bg-black flex items-center justify-center text-white">
27-
<Code size={24} strokeWidth={3} />
24+
<div className="space-y-5">
25+
<div className="flex items-center justify-between border-b-2 border-black pb-3">
26+
<div className="w-9 h-9 bg-black flex items-center justify-center text-white">
27+
<Code size={16} strokeWidth={3} />
2828
</div>
2929
<button
3030
onClick={(e) => { e.stopPropagation(); window.open(url, '_blank'); }}
31-
className="w-10 h-10 border-2 border-black flex items-center justify-center hover:bg-black hover:text-white transition-all"
31+
className="w-8 h-8 border-2 border-black flex items-center justify-center hover:bg-black hover:text-white transition-all"
32+
aria-label={`Open ${name} on GitHub`}
3233
>
33-
<ExternalLink size={18} />
34+
<ExternalLink size={14} />
3435
</button>
3536
</div>
3637

37-
<div className="space-y-4">
38-
<h4 className="text-2xl font-black tracking-tighter uppercase group-hover:text-accent-indigo transition-colors">{name}</h4>
39-
<p className="text-sm text-zinc-500 font-bold italic line-clamp-3 leading-relaxed border-l-4 border-black/5 pl-4">
38+
<div className="space-y-2.5">
39+
<h4 className="text-base font-black tracking-tighter uppercase group-hover:text-accent-indigo transition-colors leading-tight">{name}</h4>
40+
<p className="text-xs text-zinc-500 font-bold italic line-clamp-3 leading-relaxed border-l-2 border-black/5 pl-3">
4041
{description || 'System description unavailable for this repository.'}
4142
</p>
4243
</div>
4344
</div>
4445

45-
<div className="mt-12 flex items-center justify-between">
46-
<div className="flex items-center gap-6">
47-
<div className="flex items-center gap-2 font-black text-xs uppercase tracking-widest">
48-
<Star size={16} strokeWidth={3} className="text-yellow-600 fill-yellow-600" />
46+
<div className="mt-6 flex items-center justify-between">
47+
<div className="flex items-center gap-4">
48+
<div className="flex items-center gap-1.5 font-black text-[10px] uppercase tracking-widest">
49+
<Star size={12} strokeWidth={3} className="text-yellow-600 fill-yellow-600" />
4950
{stars}
5051
</div>
51-
<div className="flex items-center gap-2 font-black text-xs uppercase tracking-widest text-zinc-600">
52-
<GitFork size={16} strokeWidth={3} />
52+
<div className="flex items-center gap-1.5 font-black text-[10px] uppercase tracking-widest text-zinc-600">
53+
<GitFork size={12} strokeWidth={3} />
5354
{forks}
5455
</div>
5556
</div>
5657

57-
<div className="flex items-center gap-2 px-3 py-1 bg-zinc-100 border border-black font-black text-[9px] uppercase tracking-widest">
58+
<div className="flex items-center gap-2 px-2 py-0.5 bg-zinc-100 border border-black font-black text-[8px] uppercase tracking-widest">
5859
{language}
5960
</div>
6061
</div>

0 commit comments

Comments
 (0)