Group Header Rendering Fixes

src/lib/assets/css/tui-body.css

@@ -140,11 +140,16 @@
 
 .header-text {
 	color: var(--terminal-accent);
-	font-weight: 600;
+	font-weight: 700;
-	font-size: 1rem;
+	font-size: 1.35rem;
 	display: flex;
 	align-items: center;
 	gap: 0.5rem;
+	line-height: 1.2;
+}
+
+.header-text.inline-header {
+	display: inline-flex;
 }
 
 :global(.header-icon) {

src/lib/components/NavbarWaybar.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { mode, colorTheme, toggleMode, setColorTheme, themeOptions, themeColors, type ColorTheme } from '$lib/stores/theme';
+	import { mode, getThemeIcon, colorTheme, toggleMode, setColorTheme, themeOptions, themeColors, type ColorTheme } from '$lib/stores/theme';
 	import { page } from '$app/stores';
 	import { fly, fade, slide } from 'svelte/transition';
 	import { user, navigation } from '$lib/config';
@@ -166,13 +166,6 @@
 		mobileMenuOpen = false;
 	}
 
-	function getThemeIcon(theme: ColorTheme): string {
-		switch (theme) {
-			case 'arch': return 'mdi:arch';
-			case 'catppuccin': return 'solar:cat-bold';
-			default: return 'mdi:palette';
-		}
-	}
 </script>
 
 <svelte:window on:keydown={handleKeydown} />
@@ -195,9 +188,9 @@
 	<!-- Left modules -->
 	<div class="bar-left">
 		<!-- Arch logo / Launcher -->
-		<a href="/" class="module launcher" title="Home">
+		<!-- <a href="/" class="module launcher" title="Home">
 			<img src="/favicon.png" alt="Blob Icon" width="16" />
-		</a>
+		</a> -->
 
 		<!-- Mobile menu toggle -->
 		<button 

src/lib/components/tui/TuiHeader.svelte

@@ -1,20 +1,13 @@
 <script lang="ts">
 	import Icon from '@iconify/svelte';
 	import { user } from '$lib/config';
-	import { colorTheme, type ColorTheme } from '$lib/stores/theme';
+	import { colorTheme, getThemeIcon, type ColorTheme } from '$lib/stores/theme';
 	import '$lib/assets/css/tui-header.css';
 
 	export let title = 'terminal';
 	export let interactive = true;
 	export let hasButtons = false;
 
-	function getThemeIcon(theme: ColorTheme): string {
-		switch (theme) {
-			case 'arch': return 'mdi:arch';
-			case 'catppuccin': return 'solar:cat-bold';
-			default: return 'mdi:palette';
-		}
-	}
 </script>
 
 <div class="tui-statusbar top">

src/lib/components/tui/TuiLine.svelte

@@ -110,7 +110,12 @@
 		{#if line.content}<span class="image-caption">{line.content}</span>{/if}
 	</div>
 {:else if !isImage}
-	{#if inline}
+	{#if inline && isHeader}
+		<span class="header-text inline-header">
+			<Icon icon="mdi:pound" width="20" class="header-icon" />
+			{#each segments as seg}{#if seg.icon}<Icon icon={seg.icon} width="20" class="inline-icon" />{:else if getSegmentStyle(seg)}<span style={getSegmentStyle(seg)}>{seg.text}</span>{:else}{seg.text}{/if}{/each}
+		</span>
+	{:else if inline}
 		<span class="inline-content {line.type}">
 			{getLinePrefix(line.type)}{#each segments as seg}{#if seg.icon}<Icon icon={seg.icon} width="14" class="inline-icon" />{:else if getSegmentStyle(seg)}<span style={getSegmentStyle(seg)}>{seg.text}</span>{:else}{seg.text}{/if}{/each}
 		</span>
@@ -124,8 +129,8 @@
 			{/if}
 			{#if isHeader}
 				<span class="content header-text">
-					<Icon icon="mdi:pound" width="14" class="header-icon" />
+					<Icon icon="mdi:pound" width="25" class="header-icon" />
-					{#each segments as seg}{#if seg.icon}<Icon icon={seg.icon} width="16" class="inline-icon" />{:else if getSegmentStyle(seg)}<span style={getSegmentStyle(seg)}>{seg.text}</span>{:else}{seg.text}{/if}{/each}
+					{#each segments as seg}{#if seg.icon}<Icon icon={seg.icon} width="25" class="inline-icon" />{:else if getSegmentStyle(seg)}<span style={getSegmentStyle(seg)}>{seg.text}</span>{:else}{seg.text}{/if}{/each}
 				</span>
 			{:else}
 				<span class="content">

src/lib/pages/portfolio.ts

@@ -18,7 +18,7 @@ export 	const lines: TerminalLine[] = [
         inline: true,
         children: [
             // User info
-            { type: 'header', content: `(&primary,bold)${user.name}(&)` },
+            { type: 'header', content: `(&bold)${user.name}(&)` },
             { type: 'info', content: `(&accent)${user.title}(&)` },
             { type: 'output', content: `(&white)Location:(&) (&primary)${user.location}(&)` },
             { type: 'output', content: `(&muted)${user.bio}(&)` },
@@ -44,15 +44,7 @@ export 	const lines: TerminalLine[] = [
         href: social.link,
         inline: true
     })),
-    // { 
-    // 	type: 'button', 
-    // 	content: `Email: ${user.email}`, 
-    // 	icon: 'mdi:email',
-    // 	style: 'secondary',
-    // 	href: `mailto:${user.email}`
-    // },
     
-    { type: 'blank', content: '' },
     { type: 'divider', content: 'SKILLS', id: 'skills' },
     
     // Skills as TUI sections
@@ -90,14 +82,12 @@ export 	const lines: TerminalLine[] = [
     // Interests
     { type: 'info', content: '(&accent,bold)▸ Interests(&)' },
     { type: 'output', content: '  ' + skills.interests.map(s => `(&muted)${s}(&)`).join(' (&muted)•(&) ') },  
-    { type: 'blank', content: '' },
     
     { type: 'divider', content: 'PROJECTS', id: 'projects' },
-    { type: 'blank', content: '' },
     
     // Featured projects with buttons
     ...projects.filter(p => p.featured).flatMap(project => [
-        { type: 'header' as const, content: `(&primary,bold)${project.name}(&)` },
+        { type: 'header' as const, content: `(&bold)${project.name}(&)` },
         { type: 'output' as const, content: `(&muted)${project.description}(&)` },
         { type: 'info' as const, content: `(&info)TechStack: (&primary)${project.tech.join(', ')}(&)` },
         ...(project.github ? [{ 

src/lib/pages/projects.ts

@@ -9,7 +9,6 @@ const featuredCount = sortedCards.filter(c => c.featured).length;
 export const lines: TerminalLine[] = [
     { type: 'command', content: 'ls ~/projects --grid' },
     { type: 'divider', content: 'PROJECTS' },
-    { type: 'blank', content: '' },
     ...projects.filter(p => p.featured).flatMap(project => [
         { type: 'header' as const, content: `(&bold)${project.name}(&)` },
         { type: 'output' as const, content: `(&muted)${project.description}(&)` },
@@ -50,14 +49,12 @@ export const lines: TerminalLine[] = [
         }] : []),
         { type: 'blank' as const, content: '' }
     ]),
-    { type: 'blank', content: '' },
     { type: 'divider', content: 'HACKATHONS' },
     { type: 'command', content: 'ls ~/hackathons --grid' },
     { type: 'blank', content: '' },
     { type: 'header', content: `Hackathon Journey` },
     { type: 'output', content: `(&muted)Total:(&) (&primary)${totalHackathons}(&) (&muted)| Awards:(&) (&yellow)${totalAwards}(&) (&muted)| Featured:(&) (&accent)${featuredCount}(&)` },
     { type: 'blank', content: '' },
-    { type: 'blank', content: '' },
     { type: 'cardgrid', content: '', cards: sortedCards },
     { type: 'blank', content: '' },
     { type: 'success', content: `(&success)Ready for the next hackathon! 🚀(&)` },

src/lib/stores/theme.ts

@@ -150,6 +150,17 @@ export function setColorTheme(theme: ColorTheme) {
 	colorTheme.set(theme);
 }
 
+export function getThemeIcon(theme: ColorTheme): string {
+	switch (theme) {
+		case 'arch': return 'mdi:arch';
+		case 'catppuccin': return 'solar:cat-bold';
+		case 'wintry': return 'mdi:snowflake';
+		case 'rose': return 'mdi:flower-tulip';
+		case 'cerberus': return 'iconoir:wolf-solid';
+		default: return 'mdi:palette';
+	}
+}
+
 // Generate theme options from loaded themes
 export const themeOptions: { value: ColorTheme; label: string; icon: string }[] = 
 	Object.entries(themes).map(([key, theme]) => ({