feat(themes): warn about animated themes on high-CPU setups (#1020)

* feat(themes): warn about animated themes on high-CPU setups

Show a warning icon + tooltip on animated themes (those defining
@keyframes) in the store and in Your Themes, on Linux setups where
animation is costly — the Nvidia WebKit quirk is active or compositing
is forced off. The Nvidia detection already runs once at startup; its
result is recorded (theme_animation.rs) and read via a new
theme_animation_risk command — no GPU re-probe. Display-only; never
shown off Linux. The animated flag comes from the registry (store) or
the theme CSS (Your Themes).

* docs(themes): note the animated-theme warning PR in the Theme Store entry

src/components/settings/InstalledThemes.tsx

@@ -1,8 +1,9 @@
-import { Check, X } from 'lucide-react';
+import { AlertTriangle, Check, X } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { useThemeStore } from '../../store/themeStore';
 import { useInstalledThemesStore } from '../../store/installedThemesStore';
 import { uninstallTheme } from '../../utils/themes/uninstallTheme';
+import { useThemeAnimationRisk } from '../../hooks/useThemeAnimationRisk';
 import { FIXED_THEMES } from './fixedThemes';
 
 /** Pull a 3-band swatch (bg / card / accent) out of an installed theme's CSS. */
@@ -26,6 +27,7 @@ interface Card {
   accent: string;
   fixed: boolean;
   accessibility: boolean;
+  animated: boolean;
 }
 
 /**
@@ -39,12 +41,13 @@ export function InstalledThemes() {
   const active = useThemeStore(s => s.theme);
   const setTheme = useThemeStore(s => s.setTheme);
   const installed = useInstalledThemesStore(s => s.themes);
+  const animRisk = useThemeAnimationRisk();
 
   const cards: Card[] = [
-    ...FIXED_THEMES.map(f => ({ id: f.id, label: f.label, bg: f.bg, card: f.card, accent: f.accent, fixed: true, accessibility: !!f.accessibility })),
+    ...FIXED_THEMES.map(f => ({ id: f.id, label: f.label, bg: f.bg, card: f.card, accent: f.accent, fixed: true, accessibility: !!f.accessibility, animated: false })),
     ...installed.map(it => {
       const s = swatch(it.css);
-      return { id: it.id, label: it.name, bg: s.bg, card: s.card, accent: s.accent, fixed: false, accessibility: (it.tags || []).includes('accessibility') };
+      return { id: it.id, label: it.name, bg: s.bg, card: s.card, accent: s.accent, fixed: false, accessibility: (it.tags || []).includes('accessibility'), animated: /@(?:-[a-z]+-)?keyframes\b/i.test(it.css) };
     }),
   ];
 
@@ -101,6 +104,17 @@ export function InstalledThemes() {
                     CVD-safe
                   </span>
                 )}
+                {animRisk && c.animated && (
+                  <span
+                    role="img"
+                    aria-label={t('settings.themeAnimationWarning')}
+                    data-tooltip={t('settings.themeAnimationWarning')}
+                    data-tooltip-pos="top"
+                    style={{ display: 'inline-flex', color: 'var(--warning)', marginTop: 2 }}
+                  >
+                    <AlertTriangle size={12} />
+                  </span>
+                )}
               </button>
               {!c.fixed && (
                 <button

src/components/settings/ThemeStoreSection.tsx

@@ -1,8 +1,9 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Check, ChevronLeft, ChevronRight, Download, RefreshCw, Trash2, WifiOff } from 'lucide-react';
+import { AlertTriangle, Check, ChevronLeft, ChevronRight, Download, RefreshCw, Trash2, WifiOff } from 'lucide-react';
 import { open as openUrl } from '@tauri-apps/plugin-shell';
 import CoverLightbox from '../CoverLightbox';
+import { useThemeAnimationRisk } from '../../hooks/useThemeAnimationRisk';
 import { useThemeStore } from '../../store/themeStore';
 import { useInstalledThemesStore, type InstalledTheme } from '../../store/installedThemesStore';
 import {
@@ -33,6 +34,7 @@ export function ThemeStoreSection() {
   const setTheme = useThemeStore(s => s.setTheme);
   const installed = useInstalledThemesStore(s => s.themes);
   const install = useInstalledThemesStore(s => s.install);
+  const animRisk = useThemeAnimationRisk();
 
   const [themes, setThemes] = useState<RegistryTheme[] | null>(null);
   const [generatedAt, setGeneratedAt] = useState('');
@@ -293,6 +295,17 @@ export function ThemeStoreSection() {
                         <Check size={12} /> {t('settings.themeStoreActive')}
                       </span>
                     )}
+                    {animRisk && th.animated && (
+                      <span
+                        role="img"
+                        aria-label={t('settings.themeAnimationWarning')}
+                        data-tooltip={t('settings.themeAnimationWarning')}
+                        data-tooltip-pos="top"
+                        style={{ display: 'inline-flex', color: 'var(--warning)' }}
+                      >
+                        <AlertTriangle size={14} />
+                      </span>
+                    )}
                   </div>
                   <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>
                     {t('settings.themeStoreByAuthor', { author: th.author })}