Show on mobile Update

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

@@ -300,4 +300,8 @@
 		max-width: 100% !important;
 		width: 100%;
 	}
+
+	.mobile-hidden {
+		display: none !important;
+	}
 }

src/lib/components/tui/TuiLine.svelte

@@ -78,6 +78,7 @@
 	const isTooltip = $derived(line.type === "tooltip");
 </script>
 
+<div class:mobile-hidden={line.mobile === false} style="display: contents">
 {#if isBlank}
 	{#if inline}<span class="inline-blank"></span>{:else}<div
 			class="tui-line blank"
@@ -233,3 +234,4 @@
 		</div>
 	{/if}
 {/if}
+</div>

src/lib/components/tui/types.ts

@@ -28,6 +28,7 @@ export interface BaseTerminalLine {
 	display?: 'flex' | 'block' | 'grid' | 'inline';
 	delay?: number;
 	style?: 'primary' | 'secondary' | 'accent' | 'warning' | 'error';
+	mobile?: boolean;
 }
 
 // Specific line types

src/lib/pages/about.ts

@@ -260,6 +260,7 @@ export const lines: TerminalLine[] = [
         type: 'card',
         id: 'music-player',
         content: '',
+        mobile: false,
         children: [
             { type: 'info', content: 'Loading playlist...' }
         ]

src/lib/pages/home.ts

@@ -39,4 +39,14 @@ export const lines: TerminalLine[] = [
     { type: 'output', content: '(&muted)•(&) (&orange)Skip typing animation(&) (&text, bold)(Y)(&)' , inline: true },
     { type: 'output', content: '(&muted)•(&) (&orange)Navigate to page(&) (&text, bold)(Ctrl/Cmd+ [#])(&)' , inline: true },
     { type: 'blank', content: '' },
+    // list the themes 
+    { type: 'output', content: '(&accent)Themes:(&)', inline: true },
+    ...themeOptions.map((theme, i) => (
+        {
+            type: 'output' as const,
+            content: `(&primary)${theme.label}(&) (&text, bold)[${i+1}](&)`, 
+            inline: true
+        }
+    )),
+    { type: 'blank', content: '' },
 ];