CSS Files Styling

src/lib/components/tui/TuiHeader.svelte

@@ -1,16 +1,25 @@
 <script lang="ts">
 	import Icon from '@iconify/svelte';
 	import { user } from '$lib/config';
-	import type { SpeedPreset } from '$lib/config';
+	import { colorTheme, 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">
 	<span class="status-left">
-		<Icon icon="mdi:arch" width="14" />
+		<Icon icon={getThemeIcon($colorTheme)} width="14" />
 		<span>{user.username}@{user.hostname}</span>
 	</span>
 	<span class="status-center">{title}</span>
@@ -22,43 +31,4 @@
 	</span>
 </div>
 
-<style>
-	.tui-statusbar {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 0.4rem 0.75rem;
-		font-size: 0.75rem;
-		background: var(--terminal-bg-light);
-		border-color: var(--terminal-border);
-	}
 
-	.tui-statusbar.top {
-		border-bottom: 1px solid var(--terminal-border);
-	}
-
-	.status-left, .status-right {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-		color: var(--terminal-muted);
-	}
-
-	.status-center {
-		color: var(--terminal-primary);
-		font-weight: 600;
-	}
-
-	.hint {
-		padding: 0.1rem 0.4rem;
-		background: var(--terminal-border);
-		border-radius: 3px;
-		font-size: 0.7rem;
-	}
-
-	@media (max-width: 768px) {
-		.hint {
-			display: none;
-		}
-	}
-</style>