feat: Add Nerd Fonts support for terminal icons (#140)

Co-authored-by: Jovines <jovines@qq.com>

packages/ui/src/index.css

@@ -1523,3 +1523,20 @@ html:not(.dark) .chat-scroll {
 .terminal-viewport-container textarea {
   caret-color: transparent !important;
 }
+
+/* Mobile Terminal Optimizations */
+@media (max-width: 1024px) {
+  .terminal-viewport-container {
+    font-variant-ligatures: none;
+    font-feature-settings: "liga" 0, "calt" 0;
+  }
+}
+
+/* Font loading states */
+.fonts-loading .terminal-viewport-container {
+  font-family: monospace;
+}
+
+.fonts-loaded .terminal-viewport-container {
+  font-family: "JetBrainsMono Nerd Font", "FiraCode Nerd Font", "Fira Code", "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", "Courier New", monospace;
+}

packages/web/index.html

@@ -15,6 +15,12 @@
     <link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png" />
     <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png" />
 
+    <!-- Preload Nerd Fonts for terminal icon display -->
+    <link rel="preload" href="https://cdn.jsdelivr.net/gh/mshaugh/nerdfont-webfonts@v3.3.0/build/fonts/JetBrainsMonoNerdFont-Regular.woff2"
+          as="font" type="font/woff2" crossorigin="anonymous">
+    <link rel="preload" href="https://cdn.jsdelivr.net/gh/mshaugh/nerdfont-webfonts@v3.3.0/build/fonts/FiraCodeNerdFont-Regular.woff2"
+          as="font" type="font/woff2" crossorigin="anonymous">
+
     <!-- Web app manifest (data URL to avoid nginx auth issues) -->
     <script>
       const baseUrl = location.origin;
@@ -119,8 +125,33 @@
     <meta name="application-name" content="OpenChamber" />
     <meta name="apple-mobile-web-app-title" content="OpenChamber" />
 
-    <!-- Inline CSS for loading screen (before Tailwind loads) -->
+    <!-- Inline CSS for loading screen and Nerd Fonts (before Tailwind loads) -->
     <style>
+      /* Nerd Font @font-face declarations for terminal icon support */
+      @font-face {
+        font-family: 'JetBrainsMono Nerd Font';
+        src:
+          local('JetBrainsMono Nerd Font'),
+          url('https://cdn.jsdelivr.net/gh/mshaugh/nerdfont-webfonts@v3.3.0/build/fonts/JetBrainsMonoNerdFont-Regular.woff2') format('woff2'),
+          url('https://cdn.jsdelivr.net/gh/mshaugh/nerdfont-webfonts@v3.3.0/build/fonts/JetBrainsMonoNerdFont-Regular.woff') format('woff');
+        font-weight: normal;
+        font-style: normal;
+        font-display: swap;
+        unicode-range: U+E000-F8FF, U+F0000-FFFFF;
+      }
+
+      @font-face {
+        font-family: 'FiraCode Nerd Font';
+        src:
+          local('FiraCode Nerd Font'),
+          url('https://cdn.jsdelivr.net/gh/mshaugh/nerdfont-webfonts@v3.3.0/build/fonts/FiraCodeNerdFont-Regular.woff2') format('woff2'),
+          url('https://cdn.jsdelivr.net/gh/mshaugh/nerdfont-webfonts@v3.3.0/build/fonts/FiraCodeNerdFont-Regular.woff') format('woff');
+        font-weight: normal;
+        font-style: normal;
+        font-display: swap;
+        unicode-range: U+E000-F8FF, U+F0000-FFFFF;
+      }
+
       :root {
         --splash-background: #151313;
         --splash-stroke: white;
@@ -239,6 +270,34 @@
       }, 10000);
     </script>
 
+    <!-- CSS Font Loading API for reliable Nerd Font loading -->
+    <script>
+      (function() {
+        const fonts = [
+          {
+            name: 'JetBrainsMono Nerd Font',
+            url: 'https://cdn.jsdelivr.net/gh/mshaugh/nerdfont-webfonts@v3.3.0/build/fonts/JetBrainsMonoNerdFont-Regular.woff2'
+          },
+          {
+            name: 'FiraCode Nerd Font',
+            url: 'https://cdn.jsdelivr.net/gh/mshaugh/nerdfont-webfonts@v3.3.0/build/fonts/FiraCodeNerdFont-Regular.woff2'
+          }
+        ];
+
+        const fontPromises = fonts.map(font => {
+          const fontFace = new FontFace(font.name, `url(${font.url}) format('woff2')`);
+          document.fonts.add(fontFace);
+          return fontFace.load().catch(err => {
+            console.warn(`Failed to load font: ${font.name}`, err);
+          });
+        });
+
+        Promise.allSettled(fontPromises).then(() => {
+          document.documentElement.classList.add('fonts-loaded');
+        });
+      })();
+    </script>
+
     <!-- Polyfill for process before loading React -->
     <script>
       if (typeof process === 'undefined') {