feat: add new themes, Zed fonts, and sort theme/font lists

New themes added:
- Dark: Ayu Dark, Ayu Mirage, Ember, Matcha
- Light: Ayu Light, One Light, Bluloco, Feather

Other changes:
- Bundle Zed Sans and Zed Mono fonts from zed-industries/zed-fonts
- Sort font options alphabetically (default first)
- Sort theme options alphabetically (Dark/Light first)
- Improve Ayu Dark text contrast for better readability
- Fix Matcha theme to have green undertone instead of blue

apps/ui/src/routes/__root.tsx

@@ -160,6 +160,10 @@ function RootLayoutContent() {
     getEffectiveTheme,
     getEffectiveFontSans,
     getEffectiveFontMono,
+    // Subscribe to theme and font state to trigger re-renders when they change
+    theme,
+    fontFamilySans,
+    fontFamilyMono,
     skipSandboxWarning,
     setSkipSandboxWarning,
     fetchCodexModels,
@@ -250,7 +254,14 @@ function RootLayoutContent() {
   // Defer the theme value to keep UI responsive during rapid hover changes
   const deferredTheme = useDeferredValue(effectiveTheme);
 
-  // Get effective fonts for the current project
+  // Get effective theme and fonts for the current project
+  // Note: theme/fontFamilySans/fontFamilyMono are destructured above to ensure re-renders when they change
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  void theme; // Used for subscription
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  void fontFamilySans; // Used for subscription
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  void fontFamilyMono; // Used for subscription
   const effectiveFontSans = getEffectiveFontSans();
   const effectiveFontMono = getEffectiveFontMono();