refactor(themes): drop unreliable popularity/download stats from the store (#1050)

The install/download numbers came from jsDelivr CDN hits, which are
structurally unreliable: the stats API caps at the top 100 files, so most
themes report 0 and the figures jump from day to day. Showing them — and a
popularity bar and a most-popular sort built on them — only misled users.

Remove the stats meta box (popularity bar + download count), move the author
back under the theme name, and keep the reliable git-based last-changed date
inline. Sort is now Newest (default) or Alphabetical.

src/components/settings/ThemeStoreSection.tsx

@@ -5,7 +5,6 @@ import { open as openUrl } from '@tauri-apps/plugin-shell';
 import CoverLightbox from '../CoverLightbox';
 import { useThemeAnimationRisk } from '../../hooks/useThemeAnimationRisk';
 import { AnimatedThemeBadge } from './AnimatedThemeBadge';
-import { PopularityBar } from './PopularityBar';
 import CustomSelect from '../CustomSelect';
 import { formatRelativeTime } from '../../utils/format/relativeTime';
 import { useThemeStore } from '../../store/themeStore';
@@ -20,7 +19,7 @@ import { uninstallTheme } from '../../utils/themes/uninstallTheme';
 import { isNewer } from '../../utils/componentHelpers/appUpdaterHelpers';
 
 type ModeFilter = 'all' | 'dark' | 'light';
-type SortMode = 'popular' | 'newest' | 'name';
+type SortMode = 'newest' | 'name';
 
 const THEMES_REPO_URL = 'https://github.com/Psysonic/psysonic-themes';
 
@@ -61,7 +60,7 @@ export function ThemeStoreSection() {
   const [stale, setStale] = useState(false);
   const [query, setQuery] = useState('');
   const [mode, setMode] = useState<ModeFilter>('all');
-  const [sortMode, setSortMode] = useState<SortMode>('popular');
+  const [sortMode, setSortMode] = useState<SortMode>('newest');
   const [page, setPage] = useState(1);
   const [busyId, setBusyId] = useState<string | null>(null);
   const [failedId, setFailedId] = useState<string | null>(null);
@@ -98,14 +97,6 @@ export function ThemeStoreSection() {
     return m;
   }, [installed]);
 
-  // Scale the popularity bar against the most-downloaded theme across the whole
-  // catalogue (not the filtered view) so the bar means the same thing regardless
-  // of search/filter.
-  const maxInstalls = useMemo(
-    () => Math.max(1, ...(themes || []).map(th => th.installs ?? 0)),
-    [themes],
-  );
-
   const filtered = useMemo(() => {
     if (!themes) return [];
     const q = query.trim().toLowerCase();
@@ -120,13 +111,10 @@ export function ThemeStoreSection() {
       );
     });
     // Name is the stable tie-breaker — keeps ordering deterministic when many
-    // themes share the same (often 0) download count.
+    // themes share the same last-modified date.
     const byName = (a: RegistryTheme, b: RegistryTheme) => a.name.localeCompare(b.name);
     if (sortMode === 'name') return matched.sort(byName);
-    if (sortMode === 'newest') {
-      return matched.sort((a, b) => (b.updatedAt || '').localeCompare(a.updatedAt || '') || byName(a, b));
-    }
-    return matched.sort((a, b) => (b.installs ?? 0) - (a.installs ?? 0) || byName(a, b));
+    return matched.sort((a, b) => (b.updatedAt || '').localeCompare(a.updatedAt || '') || byName(a, b));
   }, [themes, query, mode, sortMode]);
 
   // A changed filter can shrink the result set below the current page; reset to
@@ -161,7 +149,6 @@ export function ThemeStoreSection() {
   ];
 
   const sortOptions = [
-    { value: 'popular', label: t('settings.themeStoreSortPopular') },
     { value: 'newest', label: t('settings.themeStoreSortNewest') },
     { value: 'name', label: t('settings.themeStoreSortName') },
   ];
@@ -335,11 +322,18 @@ export function ThemeStoreSection() {
                     )}
                     {animRisk && th.animated && <AnimatedThemeBadge variant="inline" />}
                   </div>
+                  <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>
+                    {t('settings.themeStoreByAuthor', { author: th.author })}
+                  </div>
                   <div style={{ fontSize: 12.5, color: 'var(--text-secondary)', lineHeight: 1.4, marginTop: 10 }}>
                     {th.description}
                   </div>
-                  {/* Rating slot reserved — see Theme Store roadmap (deferred). */}
-                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 18 }}>
+                  {th.updatedAt && (
+                    <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 8 }}>
+                      {t('settings.themeStoreLastChanged')}: {formatRelativeTime(th.updatedAt, i18n.language)}
+                    </div>
+                  )}
+                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 12 }}>
                     {!isInstalled && (
                       <button
                         className="btn btn-primary"
@@ -385,31 +379,6 @@ export function ThemeStoreSection() {
                     )}
                   </div>
                 </div>
-                <div
-                  className="theme-store-meta"
-                  style={{ flexShrink: 0, width: 190, display: 'flex', flexDirection: 'column', gap: 6, padding: '10px 12px', background: 'var(--bg-deep, var(--bg-elevated))', border: '1px solid var(--border)', borderRadius: 'var(--radius-md, 10px)' }}
-                >
-                  <div>
-                    <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>{t('settings.themeStoreAuthor')}</div>
-                    <div style={{ fontSize: 12.5, color: 'var(--text-secondary)', fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{th.author}</div>
-                  </div>
-                  <div style={{ marginTop: 4, display: 'flex', flexDirection: 'column', gap: 6 }}>
-                    <div>
-                      <div style={{ fontSize: 11, color: 'var(--text-muted)', marginBottom: 4 }}>{t('settings.themeStorePopularity')}</div>
-                      <PopularityBar value={th.installs ?? 0} max={maxInstalls} />
-                    </div>
-                    <div>
-                      <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>{t('settings.themeStoreDownloads')}</div>
-                      <div style={{ fontSize: 13, color: 'var(--text-secondary)', fontWeight: 600 }}>{(th.installs ?? 0).toLocaleString(i18n.language)}</div>
-                    </div>
-                    {th.updatedAt && (
-                      <div>
-                        <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>{t('settings.themeStoreLastChanged')}</div>
-                        <div style={{ fontSize: 12.5, color: 'var(--text-secondary)' }}>{formatRelativeTime(th.updatedAt, i18n.language)}</div>
-                      </div>
-                    )}
-                  </div>
-                </div>
               </div>
             );
           })}