feat: Refactor Font Configuration for Consistency and Correctness (#409)

* feat(unocss): centralize font configuration and fix cyrillic font handling (#389)

This commit refactors the UnoCSS font configuration to establish a single source of truth and resolve issues with Cyrillic character rendering.

- Centralizes all font definitions within the root uno.config.ts.
- Updates the theme.fontFamily to use a correct fallback chain, ensuring "Comfortaa" is used for Cyrillic characters.
- Restricts the "Kiwi Maru" font to Latin and Japanese character subsets to prevent incorrect application.
- Simplifies application-specific uno.config.ts files by removing redundant local font overrides.

* fix(ui): ensure provider models reload reactively (#407)

This commit resolves a persistent reactivity issue where the model list would not update automatically after changing provider credentials. This was a recurring problem reported by users on Discord.

Previously, the model list was only fetched when the consciousness settings page was first mounted. This meant that if a user updated an API key and navigated back, the page would still display the old, stale model list until the application was fully restarted.

The fix introduces two key changes:

1.  A `watch` effect has been added to the `providers.ts` store. It now monitors `providerCredentials` and automatically refetches the model list for a specific provider whenever its credentials change.
2.  The `consciousness.vue` component now uses the `onActivated` lifecycle hook in addition to `onMounted`. This ensures that the model list is refreshed every time the component becomes active, such as when navigating back to it. A `watch` on the `activeProvider` was also added to handle provider switching within the page.

These changes ensure that the model list is always synchronized with the current provider configuration, providing a much smoother and more intuitive user experience.

Closes #407

---------

Co-authored-by: Neko <neko@ayaka.moe>

Author: skirkru

apps/realtime-audio/uno.config.ts

@@ -17,9 +17,7 @@ export default defineConfig({
     presetAttributify(),
     presetTypography(),
     presetWebFonts({
-      fonts: {
-        ...presetWebFontsFonts('fontsource'),
-      },
+      fonts: presetWebFontsFonts('fontsource'),
       timeouts: {
         warning: 5000,
         failure: 10000,

apps/stage-tamagotchi/src/pages/settings/modules/consciousness.vue

@@ -3,7 +3,7 @@ import { Alert, ErrorContainer, RadioCardManySelect, RadioCardSimple } from '@pr
 import { useConsciousnessStore } from '@proj-airi/stage-ui/stores/modules/consciousness'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { storeToRefs } from 'pinia'
-import { onMounted } from 'vue'
+import { onMounted, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { RouterLink } from 'vue-router'
 
@@ -23,9 +23,15 @@ const {
 
 const { t } = useI18n()
 
-onMounted(async () => {
-  await consciousnessStore.loadModelsForProvider(activeProvider.value)
-})
+async function loadModelsForProvider() {
+  if (activeProvider.value) {
+    await consciousnessStore.loadModelsForProvider(activeProvider.value)
+  }
+}
+
+onMounted(loadModelsForProvider)
+
+watch(activeProvider, loadModelsForProvider)
 
 function updateCustomModelName(value: string) {
   customModelName.value = value

packages/stage-ui/src/stores/providers.ts

@@ -2372,6 +2372,20 @@ export const useProvidersStore = defineStore('providers', () => {
       }
     }
   }
+  // Watch for credential changes and refetch models accordingly
+  watch(providerCredentials, (newCreds, oldCreds) => {
+    // Determine which providers have changed credentials
+    const changedProviders = Object.keys(newCreds).filter(providerId =>
+      JSON.stringify(newCreds[providerId]) !== JSON.stringify(oldCreds?.[providerId]),
+    )
+
+    for (const providerId of changedProviders) {
+      // If the provider is configured and has the capability, refetch its models
+      if (configuredProviders.value[providerId] && providerMetadata[providerId]?.capabilities.listModels) {
+        fetchModelsForProvider(providerId)
+      }
+    }
+  }, { deep: true })
 
   // Function to get localized provider metadata
   function getProviderMetadata(providerId: string) {

packages/stage-ui/uno.config.ts

@@ -1,68 +1,11 @@
-import { defineConfig, mergeConfigs, presetWebFonts } from 'unocss'
+import { defineConfig, mergeConfigs } from 'unocss'
 
 import { histoireUnoConfig, sharedUnoConfig } from '../../uno.config'
 
 export default mergeConfigs([
   sharedUnoConfig(),
   histoireUnoConfig(),
   defineConfig({
-    presets: [
-      presetWebFonts({
-        fonts: {
-          'sans': {
-            name: 'DM Sans Variable',
-            provider: 'none',
-          },
-          'serif': {
-            name: 'DM Serif Display',
-            provider: 'none',
-          },
-          'mono': {
-            name: 'DM Mono',
-            provider: 'none',
-          },
-          'cute': {
-            name: 'Kiwi Maru',
-            provider: 'none',
-          },
-          'cuteen': {
-            name: 'Sniglet',
-            provider: 'none',
-          },
-          'jura': {
-            name: 'Jura Variable',
-            provider: 'none',
-          },
-          'gugi': {
-            name: 'Gugi',
-            provider: 'none',
-          },
-          'quicksand': {
-            name: 'Quicksand Variable',
-            provider: 'none',
-          },
-          'quanlai': {
-            name: 'cjkfonts AllSeto',
-            provider: 'none',
-          },
-          'xiaolai': {
-            name: 'Xiaolai SC',
-            provider: 'none',
-          },
-          'urbanist': {
-            name: 'Urbanist Variable',
-            provider: 'none',
-          },
-          'm-plus-rounded': {
-            name: 'M PLUS Rounded 1c',
-            provider: 'none',
-          },
-        },
-        timeouts: {
-          warning: 5000,
-          failure: 10000,
-        },
-      }),
-    ],
+    // All font configurations are now inherited from the root uno.config.ts
   }),
 ])

uno.config.ts

@@ -85,6 +85,7 @@ export function presetWebFontsFonts(provider: 'fontsource' | 'none'): Record<str
     'cutejp': {
       name: 'Kiwi Maru',
       provider,
+      subsets: ['latin', 'japanese'],
     },
     'cuteen': {
       name: 'Sniglet',
@@ -109,6 +110,7 @@ export function presetWebFontsFonts(provider: 'fontsource' | 'none'): Record<str
     'comfortaa': {
       name: provider === 'fontsource' ? 'Comfortaa' : 'Comfortaa Variable',
       provider,
+      subsets: ['cyrillic'],
     },
     'm-plus-rounded': {
       name: 'M PLUS Rounded 1c',
@@ -193,9 +195,9 @@ export function sharedUnoConfig() {
       fontFamily: {
         'sans': `"DM Sans Variant", "DM Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";`,
         'sans-rounded': `"Comfortaa Variable", "Comfortaa", "DM Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";`,
-        'cute': `"Sniglet", "Kiwi Maru", "xiaolai", "DM Sans Variant", "DM Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";`,
-        'cuteen': `"Sniglet", "Kiwi Maru", "xiaolai", "DM Sans Variant", "DM Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";`,
-        'cutejp': `"Sniglet", "Kiwi Maru", "xiaolai", "DM Sans Variant", "DM Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";`,
+        'cute': `"Sniglet", "Kiwi Maru", "Comfortaa", "xiaolai", "DM Sans Variant", "DM Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";`,
+        'cuteen': `"Sniglet", "Kiwi Maru", "Comfortaa", "xiaolai", "DM Sans Variant", "DM Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";`,
+        'cutejp': `"Sniglet", "Kiwi Maru", "Comfortaa", "xiaolai", "DM Sans Variant", "DM Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";`,
       },
       /**
        * https://github.com/unocss/unocss/blob/1031312057a3bea1082b7d938eb2ad640f57613a/packages-presets/preset-wind4/src/theme/animate.ts