packages/web: fix lucide github; optimize Vite deps in dev mode

Signed-off-by: NotAShelf <raf@notashelf.dev>
Change-Id: I75110e204c8eda63096bcfed619a6f5c6a6a6964

packages/web/src/@types/lucide.d.ts

@@ -0,0 +1,6 @@
+declare module 'lucide-solid/icons/*' {
+  import { LucideProps } from 'lucide-solid/dist/types/types';
+  import { Component } from 'solid-js';
+  const cmp: Component<LucideProps>;
+  export = cmp;
+}

packages/web/src/components/ComparisonView.tsx

@@ -1,7 +1,10 @@
 import { Component, For, createSignal, createMemo, Show } from 'solid-js';
 import { ComparisonEntry, calculateChange } from '@ns/core';
 import { formatBytes, formatNumber, formatTime, formatPercent } from '@ns/ui-utils';
-import { ArrowRight, ArrowDown, ArrowUp, X } from 'lucide-solid';
+import ArrowRightIcon from 'lucide-solid/icons/arrow-right';
+import ArrowDownIcon from 'lucide-solid/icons/arrow-down';
+import ArrowUpIcon from 'lucide-solid/icons/arrow-up';
+import XIcon from 'lucide-solid/icons/x';
 
 interface ComparisonViewProps {
   entries: ComparisonEntry[];
@@ -106,7 +109,7 @@ const ComparisonView: Component<ComparisonViewProps> = props => {
           </select>
         </div>
         <div class="compare-arrow">
-          <ArrowRight size={20} />
+          <ArrowRightIcon size={20} />
         </div>
         <div class="compare-selector">
           <label>Current</label>
@@ -127,7 +130,7 @@ const ComparisonView: Component<ComparisonViewProps> = props => {
               <div class="snapshot-item">
                 <span class="snapshot-name">{entry.name}</span>
                 <button class="delete-btn" onClick={() => props.onDelete(entry.id)}>
-                  <X size={16} />
+                  <XIcon size={16} />
                 </button>
               </div>
             )}
@@ -195,10 +198,10 @@ const ComparisonView: Component<ComparisonViewProps> = props => {
                       <Show when={row.isDifferent} fallback={<span class="neutral">—</span>}>
                         <span class="change-value">
                           <Show when={row.isReduction}>
-                            <ArrowDown size={14} />
+                            <ArrowDownIcon size={14} />
                           </Show>
                           <Show when={!row.isReduction}>
-                            <ArrowUp size={14} />
+                            <ArrowUpIcon size={14} />
                           </Show>
                           {Math.abs(row.change).toFixed(2)}%
                         </span>
@@ -221,13 +224,13 @@ const ComparisonView: Component<ComparisonViewProps> = props => {
         <div class="comparison-summary">
           <Show when={comparison()?.some(r => r.isReduction)}>
             <div class="summary-good">
-              <ArrowDown size={16} />{' '}
+              <ArrowDownIcon size={16} />{' '}
               {comparison()?.filter(r => r.isReduction && r.isDifferent).length} improved
             </div>
           </Show>
           <Show when={comparison()?.some(r => !r.isReduction && r.isDifferent)}>
             <div class="summary-bad">
-              <ArrowUp size={16} />{' '}
+              <ArrowUpIcon size={16} />{' '}
               {comparison()?.filter(r => !r.isReduction && r.isDifferent).length} regressed
             </div>
           </Show>

packages/web/src/components/FileUpload.tsx

@@ -1,6 +1,7 @@
 import { createSignal, Show, For } from 'solid-js';
 import { StatsData, ComparisonEntry } from '@ns/core';
-import { BarChart2, Clock } from 'lucide-solid';
+import BarChart2Icon from 'lucide-solid/icons/bar-chart-2';
+import ClockIcon from 'lucide-solid/icons/clock';
 
 interface FileUploadProps {
   onFileLoad: (data: StatsData, raw: Record<string, unknown>) => void;
@@ -44,7 +45,7 @@ export default function FileUpload(props: FileUploadProps) {
     <div class="upload-container">
       <div class="upload-card">
         <div class="upload-icon">
-          <BarChart2 size={48} />
+          <BarChart2Icon size={48} />
         </div>
         <h2>Load Statistics</h2>
 
@@ -97,7 +98,7 @@ export default function FileUpload(props: FileUploadProps) {
         <Show when={props.snapshots && props.snapshots.length > 0}>
           <div class="recent-analyses">
             <h3>
-              <Clock size={16} />
+              <ClockIcon size={16} />
               Recent Analyses
             </h3>
             <div class="snapshot-list">

packages/web/src/components/Section.tsx

@@ -1,5 +1,5 @@
 import { Component, createSignal, type JSX, Show } from 'solid-js';
-import { ChevronDown } from 'lucide-solid';
+import ChevronDownIcon from 'lucide-solid/icons/chevron-down';
 
 interface SectionProps {
   title: string;
@@ -16,7 +16,7 @@ const Section: Component<SectionProps> = props => {
       <Show when={props.collapsible}>
         <button class="section-header" onClick={() => setCollapsed(!collapsed())}>
           <span class="section-title">{props.title}</span>
-          <ChevronDown size={16} class="section-toggle" />
+          <ChevronDownIcon size={16} class="section-toggle" />
         </button>
       </Show>
       <Show when={!props.collapsible || !collapsed()}>

packages/web/src/index.tsx

@@ -1,6 +1,9 @@
 import { createSignal, Show, For, onMount, createEffect, lazy } from 'solid-js';
 import { render } from 'solid-js/web';
-import { Github, Save, Upload, Trash2, X } from 'lucide-solid';
+import SaveIcon from 'lucide-solid/icons/save';
+import UploadIcon from 'lucide-solid/icons/upload';
+import Trash2Icon from 'lucide-solid/icons/trash-2';
+import XIcon from 'lucide-solid/icons/x';
 import FileUpload from './components/FileUpload';
 import { StatsData, ComparisonEntry, parseStats } from '@ns/core';
 import './styles.css';
@@ -184,7 +187,7 @@ function App() {
               onClick={() => setShowManageSnapshots(true)}
               title="Manage Snapshots"
             >
-              <Trash2 size={16} />
+              <Trash2Icon size={16} />
             </button>
           </Show>
         </nav>
@@ -255,7 +258,7 @@ function App() {
           rel="noopener noreferrer"
           class="footer-link"
         >
-          <Github size={16} />
+          <img src="/assets/github.svg" alt="GitHub" width={16} height={16} />
           Source
         </a>
       </footer>
@@ -266,7 +269,7 @@ function App() {
             <div class="modal-header">
               <h3>Manage Snapshots</h3>
               <button class="close-btn" onClick={() => setShowManageSnapshots(false)}>
-                <X size={20} />
+                <XIcon size={20} />
               </button>
             </div>
             <div class="snapshot-list-manage">
@@ -281,7 +284,7 @@ function App() {
                       </span>
                     </div>
                     <button class="delete-btn" onClick={() => deleteSnapshot(entry.id)}>
-                      <X size={16} />
+                      <XIcon size={16} />
                     </button>
                   </div>
                 )}
@@ -290,7 +293,7 @@ function App() {
             <Show when={snapshots().length > 0}>
               <div class="modal-actions">
                 <button class="danger-btn" onClick={clearAllSnapshots}>
-                  <Trash2 size={16} />
+                  <Trash2Icon size={16} />
                   Clear All
                 </button>
               </div>
@@ -306,10 +309,10 @@ function App() {
             onClick={() => setShowSaveDialog(true)}
             title="Save Snapshot"
           >
-            <Save size={20} />
+            <SaveIcon size={20} />
           </button>
           <button class="action-btn clear" onClick={() => setCurrentStats(null)} title="Load New">
-            <Upload size={20} />
+            <UploadIcon size={20} />
           </button>
         </div>
       </Show>

packages/web/src/styles.css

@@ -168,6 +168,10 @@ body {
   transition: color 0.2s;
 }
 
+.footer-link img {
+  fill: currentColor;
+}
+
 .footer-link:hover {
   color: var(--text-primary);
 }