Skip to content

Commit 73a0e4b

Browse files
shantanu patilclaude
authored and
shantanu patil
committed
perf: optimize frontend bundle — replace react-icons with lucide-react, fix optimizePackageImports, remove unused deps
- Replace all react-icons imports with lucide-react equivalents across 10 files - Fix optimizePackageImports: change '@mermaid-js/mermaid' to 'mermaid' - Remove unused dependencies: hugeicons-react, next-intl, react-icons - Optimize Three.js imports in ParticleField, KnowledgeCube, CodeConstellation to use named imports instead of namespace imports (import * as THREE) - Refactor src/i18n.ts to remove next-intl dependency while keeping locales export Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 5fffc03 commit 73a0e4b

17 files changed

Lines changed: 813 additions & 306 deletions

‎next.config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const nextConfig: NextConfig = {
77
output: 'standalone',
88
// Optimize build for Docker
99
experimental: {
10-
optimizePackageImports: ['@mermaid-js/mermaid', 'react-syntax-highlighter'],
10+
optimizePackageImports: ['mermaid', 'react-syntax-highlighter'],
1111
},
1212
// Reduce memory usage during build
1313
webpack: (config, { isServer }) => {

‎package.json‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,17 +22,14 @@
2222
"file-saver": "^2.0.5",
2323
"framer-motion": "^12.34.3",
2424
"gsap": "^3.14.2",
25-
"hugeicons-react": "^0.4.0",
2625
"jszip": "^3.10.1",
2726
"lenis": "^1.3.17",
2827
"lucide-react": "^0.574.0",
2928
"mermaid": "^11.4.1",
3029
"next": "15.3.1",
31-
"next-intl": "^4.1.0",
3230
"next-themes": "^0.4.6",
3331
"react": "^19.0.0",
3432
"react-dom": "^19.0.0",
35-
"react-icons": "^5.5.0",
3633
"react-markdown": "^10.1.0",
3734
"react-syntax-highlighter": "^15.6.1",
3835
"rehype-raw": "^7.0.0",

‎src/app/[owner]/[repo]/layout.tsx‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,14 @@
33
import React from 'react';
44
import Link from 'next/link';
55
import { useParams, useSearchParams, usePathname } from 'next/navigation';
6-
import { FaGithub, FaGitlab, FaBitbucket, FaHome } from 'react-icons/fa';
6+
import { Github, Gitlab, Home } from 'lucide-react';
7+
8+
// Bitbucket icon (lucide-react does not include one)
9+
const BitbucketIcon = ({ className }: { className?: string }) => (
10+
<svg className={className} viewBox="0 0 24 24" fill="currentColor">
11+
<path d="M.778 1.213a.768.768 0 00-.768.892l3.263 19.81c.084.5.515.868 1.022.873H19.95a.772.772 0 00.77-.646l3.27-20.03a.768.768 0 00-.768-.89H.778zM14.52 15.53H9.522L8.17 8.466h7.561l-1.211 7.064z"/>
12+
</svg>
13+
);
714
import ThemeToggle from '@/components/theme-toggle';
815

916
/* ------------------------------------------------------------------ */
@@ -22,11 +29,11 @@ const TABS = [
2229
function PlatformIcon({ type }: { type: string }) {
2330
switch (type) {
2431
case 'gitlab':
25-
return <FaGitlab className="h-3.5 w-3.5" />;
32+
return <Gitlab size={14} className="h-3.5 w-3.5" />;
2633
case 'bitbucket':
27-
return <FaBitbucket className="h-3.5 w-3.5" />;
34+
return <BitbucketIcon className="h-3.5 w-3.5" />;
2835
default:
29-
return <FaGithub className="h-3.5 w-3.5" />;
36+
return <Github size={14} className="h-3.5 w-3.5" />;
3037
}
3138
}
3239

@@ -67,7 +74,7 @@ export default function RepoLayout({ children }: { children: React.ReactNode })
6774
href="/"
6875
className="flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors shrink-0"
6976
>
70-
<FaHome className="h-3.5 w-3.5" />
77+
<Home size={14} className="h-3.5 w-3.5" />
7178
</Link>
7279
<span className="text-muted-foreground/30 shrink-0">/</span>
7380
<div className="flex items-center gap-1.5 text-sm font-medium text-foreground min-w-0">

‎src/app/[owner]/[repo]/page.tsx‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import Link from 'next/link';
1515
import { useParams, useSearchParams } from 'next/navigation';
1616
import React, { useCallback, useMemo, useRef, useState } from 'react';
1717
import { motion } from 'framer-motion';
18-
import { FaArrowLeft, FaBook, FaBookOpen, FaComments, FaExclamationTriangle, FaHome, FaProjectDiagram, FaSearch, FaSync, FaTimes } from 'react-icons/fa';
18+
import { ArrowLeft, Book, BookOpen, MessageSquare, AlertTriangle, Home, Network, Search, RefreshCw, X } from 'lucide-react';
1919
import DependencyGraph from '@/components/DependencyGraph';
2020
import WikiSidebarSkeleton from '@/components/skeletons/WikiSidebarSkeleton';
2121
import WikiContentSkeleton from '@/components/skeletons/WikiContentSkeleton';
@@ -348,7 +348,7 @@ export default function RepoWikiPage() {
348348
className="inline-flex items-center gap-2 rounded-md px-3 py-1 text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
349349
aria-label="Exit reading mode"
350350
>
351-
<FaArrowLeft className="h-3.5 w-3.5" />
351+
<ArrowLeft size={14} className="h-3.5 w-3.5" />
352352
<span className="hidden sm:inline">Exit Reading Mode</span>
353353
</button>
354354
<span className="text-sm font-medium text-foreground truncate">
@@ -368,7 +368,7 @@ export default function RepoWikiPage() {
368368
className="inline-flex items-center gap-2 rounded-md border border-input bg-background px-3 py-1.5 text-xs text-muted-foreground shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground"
369369
aria-label="Search pages"
370370
>
371-
<FaSearch className="h-3 w-3" />
371+
<Search size={12} className="h-3 w-3" />
372372
<span className="hidden sm:inline">Search</span>
373373
<kbd className="hidden sm:inline-flex items-center gap-0.5 rounded border border-border bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground ml-1">
374374
<span>&#8984;</span>K
@@ -381,7 +381,7 @@ export default function RepoWikiPage() {
381381
aria-label="View page relationships graph"
382382
title="View page relationships"
383383
>
384-
<FaProjectDiagram className="h-3 w-3" />
384+
<Network size={12} className="h-3 w-3" />
385385
<span className="hidden sm:inline">Graph</span>
386386
</button>
387387
{/* Reading mode toggle */}
@@ -391,7 +391,7 @@ export default function RepoWikiPage() {
391391
aria-label="Reading mode"
392392
title="Reading mode (Alt+R)"
393393
>
394-
<FaBook className="h-3 w-3" />
394+
<Book size={12} className="h-3 w-3" />
395395
<span className="hidden sm:inline">Read</span>
396396
</button>
397397
</div>
@@ -491,7 +491,7 @@ export default function RepoWikiPage() {
491491
) : error ? (
492492
<div className="max-w-2xl mx-auto mt-12 p-6 border border-destructive/20 bg-destructive/5 rounded-xl text-center">
493493
<div className="inline-flex items-center justify-center p-3 bg-destructive/10 rounded-full mb-4">
494-
<FaExclamationTriangle className="text-xl text-destructive" />
494+
<AlertTriangle size={20} className="text-destructive" />
495495
</div>
496496
<h3 className="text-lg font-semibold text-foreground mb-2">{messages.repoPage?.errorTitle || 'Generation Failed'}</h3>
497497
<p className="text-muted-foreground mb-6">{error}</p>
@@ -500,7 +500,7 @@ export default function RepoWikiPage() {
500500
href="/"
501501
className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2"
502502
>
503-
<FaHome className="mr-2 h-4 w-4" />
503+
<Home size={16} className="mr-2 h-4 w-4" />
504504
{messages.repoPage?.backToHome || 'Back to Home'}
505505
</Link>
506506
</div>
@@ -563,7 +563,7 @@ export default function RepoWikiPage() {
563563
className="ml-auto p-1.5 text-muted-foreground hover:text-foreground hover:bg-muted rounded-md transition-colors"
564564
title={messages.repoPage?.refreshWiki || 'Refresh'}
565565
>
566-
<FaSync className={`h-3.5 w-3.5 ${isLoading ? 'animate-spin' : ''}`} />
566+
<RefreshCw size={14} className={`h-3.5 w-3.5 ${isLoading ? 'animate-spin' : ''}`} />
567567
</button>
568568
</div>
569569
</motion.div>
@@ -626,7 +626,7 @@ export default function RepoWikiPage() {
626626
className="shrink-0 mt-1 inline-flex items-center gap-1.5 rounded-md border border-input bg-background px-2.5 py-1.5 text-xs font-medium text-muted-foreground shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground disabled:opacity-50 disabled:cursor-not-allowed"
627627
title="Regenerate this page"
628628
>
629-
<FaSync className={`h-3 w-3 ${isRegenerating === currentPageId ? 'animate-spin' : ''}`} />
629+
<RefreshCw size={12} className={`h-3 w-3 ${isRegenerating === currentPageId ? 'animate-spin' : ''}`} />
630630
<span className="hidden sm:inline">{isRegenerating === currentPageId ? 'Regenerating...' : 'Regenerate'}</span>
631631
</button>
632632
)}
@@ -656,14 +656,14 @@ export default function RepoWikiPage() {
656656

657657
{isRegenerating === currentPageId ? (
658658
<div className="flex flex-col items-center justify-center py-16 text-center">
659-
<FaSync className="h-6 w-6 text-primary animate-spin mb-4" />
659+
<RefreshCw size={24} className="h-6 w-6 text-primary animate-spin mb-4" />
660660
<p className="text-sm font-medium text-foreground mb-1">Regenerating page...</p>
661661
<p className="text-xs text-muted-foreground">This may take a moment</p>
662662
</div>
663663
) : generatedPages[currentPageId].content.startsWith('Error generating content:') ? (
664664
<div className="flex flex-col items-center justify-center py-12 text-center">
665665
<div className="inline-flex items-center justify-center p-3 bg-destructive/10 rounded-full mb-4">
666-
<FaExclamationTriangle className="text-xl text-destructive" />
666+
<AlertTriangle size={20} className="text-destructive" />
667667
</div>
668668
<p className="text-sm text-muted-foreground mb-4">{generatedPages[currentPageId].content}</p>
669669
<button
@@ -676,7 +676,7 @@ export default function RepoWikiPage() {
676676
}}
677677
className="inline-flex items-center gap-2 rounded-md bg-primary text-primary-foreground px-4 py-2 text-sm font-medium hover:bg-primary/90 transition-colors"
678678
>
679-
<FaSync className="h-3 w-3" />
679+
<RefreshCw size={12} className="h-3 w-3" />
680680
Retry
681681
</button>
682682
</div>
@@ -725,7 +725,7 @@ export default function RepoWikiPage() {
725725
) : (
726726
<div className="flex flex-col items-center justify-center h-full text-muted-foreground">
727727
<div className="p-4 bg-muted/30 rounded-full mb-4">
728-
<FaBookOpen className="text-3xl opacity-50" />
728+
<BookOpen size={30} className="opacity-50" />
729729
</div>
730730
<p className="text-lg font-medium text-foreground">Select a page</p>
731731
<p className="text-sm">Choose a page from the sidebar to view its content</p>
@@ -749,7 +749,7 @@ export default function RepoWikiPage() {
749749
className={`fixed bottom-8 right-8 h-12 w-12 rounded-full shadow-lg flex items-center justify-center transition-all hover:scale-105 z-50 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 ${isAskModalOpen ? 'bg-primary/90 text-primary-foreground ring-2 ring-primary ring-offset-2 ring-offset-background' : 'bg-primary text-primary-foreground hover:bg-primary/90'}`}
750750
aria-label={isAskModalOpen ? 'Close Ask AI' : (messages.ask?.title || 'Ask AI')}
751751
>
752-
{isAskModalOpen ? <FaTimes className="h-5 w-5" /> : <FaComments className="h-5 w-5" />}
752+
{isAskModalOpen ? <X size={20} className="h-5 w-5" /> : <MessageSquare size={20} className="h-5 w-5" />}
753753
</button>
754754
)}
755755

@@ -793,7 +793,7 @@ export default function RepoWikiPage() {
793793
className="p-2 rounded-md hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
794794
aria-label="Close drawer"
795795
>
796-
<FaTimes className="h-4 w-4" />
796+
<X size={16} className="h-4 w-4" />
797797
</button>
798798
</div>
799799
</div>

‎src/app/page.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { useRouter } from 'next/navigation';
55
import Link from 'next/link';
66
import dynamic from 'next/dynamic';
77
import { motion } from 'framer-motion';
8-
import { FaWikipediaW, FaGithub, FaTwitter } from 'react-icons/fa';
8+
import { BookOpen, Github, Twitter } from 'lucide-react';
99
import ThemeToggle from '@/components/theme-toggle';
1010
import Mermaid from '../components/Mermaid';
1111
import ConfigurationModal from '@/components/ConfigurationModal';
@@ -466,7 +466,7 @@ export default function Home() {
466466
{/* Left: Logo + App Name */}
467467
<div className="flex items-center gap-3">
468468
<div className="bg-primary p-2 rounded-xl elevation-1">
469-
<FaWikipediaW className="text-lg text-primary-foreground" />
469+
<BookOpen size={18} className="text-primary-foreground" />
470470
</div>
471471
<span className="text-title-md text-foreground" style={{ fontFamily: 'var(--font-display), var(--font-sans), sans-serif' }}>
472472
{t('common.appName')}
@@ -493,7 +493,7 @@ export default function Home() {
493493
className="text-muted-foreground hover:text-foreground transition-colors"
494494
aria-label="GitHub Repository"
495495
>
496-
<FaGithub className="text-lg" />
496+
<Github size={18} />
497497
</a>
498498
</div>
499499
</div>
@@ -564,7 +564,7 @@ export default function Home() {
564564
<div className="flex flex-col sm:flex-row items-center justify-between pb-6 border-b border-border">
565565
<div className="flex items-center gap-3">
566566
<div className="bg-primary/10 p-2 rounded-full">
567-
<FaWikipediaW className="text-xl text-primary" />
567+
<BookOpen size={20} className="text-primary" />
568568
</div>
569569
<div>
570570
<h2 className="text-headline-md text-foreground">{t('projects.existingProjects')}</h2>
@@ -679,10 +679,10 @@ export default function Home() {
679679
<div className="flex items-center gap-6">
680680
<div className="flex items-center space-x-5">
681681
<a href="https://github.com/REDFOX1899/BetterCodeWiki" target="_blank" rel="noopener noreferrer" className="hover:text-foreground transition-colors">
682-
<FaGithub className="text-lg" />
682+
<Github size={18} />
683683
</a>
684684
<a href="https://github.com/REDFOX1899/BetterCodeWiki" target="_blank" rel="noopener noreferrer" className="hover:text-foreground transition-colors">
685-
<FaTwitter className="text-lg" />
685+
<Twitter size={18} />
686686
</a>
687687
</div>
688688
</div>

‎src/components/Ask.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use client';
22

33
import React, { useState, useRef, useEffect } from 'react';
4-
import { FaChevronLeft, FaChevronRight } from 'react-icons/fa';
4+
import { ChevronLeft, ChevronRight } from 'lucide-react';
55
import Markdown from './Markdown';
66
import { useLanguage } from '@/contexts/LanguageContext';
77
import RepoInfo from '@/types/repoinfo';
@@ -753,7 +753,7 @@ const Ask: React.FC<AskProps> = ({
753753
className="p-1.5 rounded-md hover:bg-background hover:shadow-sm disabled:opacity-30 disabled:hover:bg-transparent disabled:hover:shadow-none transition-all"
754754
aria-label="Previous stage"
755755
>
756-
<FaChevronLeft size={12} className="text-muted-foreground" />
756+
<ChevronLeft size={12} className="text-muted-foreground" />
757757
</button>
758758

759759
<div className="text-xs font-medium text-muted-foreground min-w-[60px] text-center">
@@ -766,7 +766,7 @@ const Ask: React.FC<AskProps> = ({
766766
className="p-1.5 rounded-md hover:bg-background hover:shadow-sm disabled:opacity-30 disabled:hover:bg-transparent disabled:hover:shadow-none transition-all"
767767
aria-label="Next stage"
768768
>
769-
<FaChevronRight size={12} className="text-muted-foreground" />
769+
<ChevronRight size={12} className="text-muted-foreground" />
770770
</button>
771771

772772
<div className="mx-2 h-4 w-px bg-border"></div>

‎src/components/DependencyGraph.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use client';
22

33
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
4-
import { FaTimes, FaSearchPlus, FaSearchMinus, FaExpand, FaProjectDiagram, FaSitemap, FaDotCircle } from 'react-icons/fa';
4+
import { X, ZoomIn, ZoomOut, Maximize, Network, GitBranch, CircleDot } from 'lucide-react';
55

66
/* ------------------------------------------------------------------ */
77
/* Types */
@@ -840,9 +840,9 @@ export default function DependencyGraph({
840840
className="flex items-center rounded-lg p-0.5 gap-0.5 bg-muted/50"
841841
>
842842
{([
843-
{ mode: 'force' as LayoutMode, icon: <FaProjectDiagram className="w-3 h-3" />, label: 'Force' },
844-
{ mode: 'hierarchical' as LayoutMode, icon: <FaSitemap className="w-3 h-3" />, label: 'Tree' },
845-
{ mode: 'radial' as LayoutMode, icon: <FaDotCircle className="w-3 h-3" />, label: 'Radial' },
843+
{ mode: 'force' as LayoutMode, icon: <Network size={12} className="w-3 h-3" />, label: 'Force' },
844+
{ mode: 'hierarchical' as LayoutMode, icon: <GitBranch size={12} className="w-3 h-3" />, label: 'Tree' },
845+
{ mode: 'radial' as LayoutMode, icon: <CircleDot size={12} className="w-3 h-3" />, label: 'Radial' },
846846
]).map(({ mode, icon, label }) => (
847847
<button
848848
key={mode}
@@ -867,23 +867,23 @@ export default function DependencyGraph({
867867
aria-label="Zoom in"
868868
title="Zoom in"
869869
>
870-
<FaSearchPlus className="w-3.5 h-3.5" />
870+
<ZoomIn size={14} className="w-3.5 h-3.5" />
871871
</button>
872872
<button
873873
onClick={zoomOut}
874874
className="p-2 rounded-lg transition-colors text-muted-foreground hover:bg-muted"
875875
aria-label="Zoom out"
876876
title="Zoom out"
877877
>
878-
<FaSearchMinus className="w-3.5 h-3.5" />
878+
<ZoomOut size={14} className="w-3.5 h-3.5" />
879879
</button>
880880
<button
881881
onClick={fitToView}
882882
className="p-2 rounded-lg transition-colors text-muted-foreground hover:bg-muted"
883883
aria-label="Fit to view"
884884
title="Fit to view"
885885
>
886-
<FaExpand className="w-3.5 h-3.5" />
886+
<Maximize size={14} className="w-3.5 h-3.5" />
887887
</button>
888888

889889
<div className="w-px h-5 mx-1 bg-border/50" />
@@ -893,7 +893,7 @@ export default function DependencyGraph({
893893
className="p-2 rounded-lg transition-colors text-muted-foreground hover:bg-muted"
894894
aria-label="Close graph"
895895
>
896-
<FaTimes className="w-3.5 h-3.5" />
896+
<X size={14} className="w-3.5 h-3.5" />
897897
</button>
898898
</div>
899899
</div>

0 commit comments

Comments
 (0)