feat: replace table header icons with unified sparkle glyph and align default sorting #25

src/components/TechTable.tsx

@@ -33,7 +33,6 @@ export const formatAsciiTag = (val: string): string => {
 interface TechTableProps {
   id?: string;
   title: string;
-  icon?: React.ReactNode;
   entries: TechEntry[];
   priority?: boolean;
   defaultSort?: 'stars' | 'name' | 'momentum' | 'ecosystem' | 'year';
@@ -133,7 +132,6 @@ const useIsMobile = () => {
 export const TechTable: React.FC<TechTableProps> = ({
   id,
   title,
-  icon,
   entries,
   priority = false,
   defaultSort = 'stars',
@@ -262,14 +260,10 @@ export const TechTable: React.FC<TechTableProps> = ({
           {/* Table Top Header Bar: Title + Single Sort Dropdown */}
           <div className="px-5 py-4 sm:px-6 sm:py-5 border-b border-neutral-200/80 dark:border-neutral-800 flex flex-wrap items-center justify-between gap-4 bg-neutral-50/60 dark:bg-neutral-900/50">
             <div className="flex items-center gap-3">
-              {icon && (
-                <div className="p-2 rounded-xl bg-blue-500/10 dark:bg-[#CEFF00]/10 text-[#0066FF] dark:text-[#CEFF00] shrink-0">
-                  {icon}
-                </div>
-              )}
               <h2 className="font-serif text-xl sm:text-2xl lg:text-[26px] xl:text-[28px] font-bold tracking-tight flex items-center gap-2 sm:gap-2.5 py-1 leading-snug">
-                <span className="text-transparent bg-clip-text bg-gradient-to-b from-neutral-950 via-neutral-800 to-neutral-500 dark:from-white dark:via-neutral-200 dark:to-neutral-400 inline-block py-0.5">
-                  {sanitizeText(title)}
+                <span className="text-transparent bg-clip-text bg-gradient-to-b from-neutral-950 via-neutral-800 to-neutral-500 dark:from-white dark:via-neutral-200 dark:to-neutral-400 inline-flex items-center py-0.5">
+                  <span className="mr-2 sm:mr-2.5 select-none" aria-hidden="true">✦</span>
+                  <span>{sanitizeText(title)}</span>
                 </span>
                 <GlassBadge count={processedEntries.length} />
               </h2>

src/pages/SecurityPage.tsx

@@ -1,7 +1,6 @@
 import React, { useMemo, useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { ShieldCheck, Terminal } from 'lucide-react';
 import { HeaderShowcase } from '../components/HeaderShowcase';
 import { TechTable } from '../components/TechTable';
 import { ProximitySidebar } from '../components/ProximitySidebar';
@@ -51,15 +50,13 @@ export const SecurityPage: React.FC = () => {
         <TechTable
           id="section-security"
           title={t('sections.securityTools')}
-          icon={<ShieldCheck className="w-5 h-5" />}
           entries={sortedSecurityTools}
           priority
         />
 
         <TechTable
           id="section-security-distros"
           title={t('sections.securityDistros')}
-          icon={<Terminal className="w-5 h-5" />}
           entries={sortedSecurityDistros}
         />
       </div>

src/pages/SoftwarePage.tsx

@@ -1,7 +1,6 @@
 import React, { useMemo, useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { Code2, Layers, Database, Terminal, Bot, Cpu } from 'lucide-react';
 import { HeaderShowcase } from '../components/HeaderShowcase';
 import { TechTable } from '../components/TechTable';
 import { ProximitySidebar } from '../components/ProximitySidebar';
@@ -28,10 +27,9 @@ export const SoftwarePage: React.FC = () => {
     }
   }, [location]);
 
-  // Dynamically sort language entries by ecosystem volume (totalRepos) to avoid reference repo star distortion
   const sortedLanguages = useMemo(() => {
     return [...(rawLanguages as TechEntry[])].sort(
-      (a, b) => b.popularity.totalRepos - a.popularity.totalRepos
+      (a, b) => b.popularity.totalStars - a.popularity.totalStars
     );
   }, []);
 
@@ -84,44 +82,37 @@ export const SoftwarePage: React.FC = () => {
         <TechTable
           id="section-languages"
           title={t('sections.languages')}
-          icon={<Code2 className="w-5 h-5" />}
           entries={sortedLanguages}
-          defaultSort="ecosystem"
           priority
         />
 
         <TechTable
           id="section-frameworks"
           title={t('sections.frameworks')}
-          icon={<Layers className="w-5 h-5" />}
           entries={sortedFrameworks}
         />
 
         <TechTable
           id="section-databases"
           title={t('sections.databases')}
-          icon={<Database className="w-5 h-5" />}
           entries={sortedDatabases}
         />
 
         <TechTable
           id="section-linux-distros"
           title={t('sections.linuxDistros')}
-          icon={<Terminal className="w-5 h-5" />}
           entries={sortedLinuxDistros}
         />
 
         <TechTable
           id="section-ai-tools"
           title={t('sections.aiTools')}
-          icon={<Bot className="w-5 h-5" />}
           entries={sortedAiTools}
         />
 
         <TechTable
           id="section-ai-infrastructure"
           title={t('sections.aiInfrastructure')}
-          icon={<Cpu className="w-5 h-5" />}
           entries={sortedAiInfrastructure}
         />
       </div>

tests/TechTable.test.tsx

@@ -76,6 +76,7 @@ describe('TechTable Component', () => {
     );
 
     expect(screen.getByText('Test Languages')).toBeInTheDocument();
+    expect(screen.getByText('✦')).toBeInTheDocument();
     expect(screen.getAllByText('Python').length).toBeGreaterThan(0);
     expect(screen.getAllByText('Rust').length).toBeGreaterThan(0);
     expect(screen.getAllByText('Guido van Rossum').length).toBeGreaterThan(0);