fix(web): clarify Genius processing progress and queue actions

apps/web/src/pages/admin/GeniusPanel.tsx

@@ -8,7 +8,7 @@ import s from '../page.module.css';
 import g from '../genius.module.css';
 
 export function GeniusPanel() {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const session = useSession();
   const queries = useQueryClient();
   const errorText = useErrorText();
@@ -24,16 +24,23 @@ export function GeniusPanel() {
   });
   const data = stats.data;
   const cooling = data && Date.parse(data.cooldown_until) > Date.now();
-  const state = !data ? t('genius.loading') : !data.configured ? t('genius.disabled') : data.paused ? t('genius.paused') : cooling ? t('genius.cooldown') : data.running ? t('genius.running') : t('genius.waiting');
+  const state = !data ? t('genius.loading') : !data.configured ? t('genius.disabled') : data.paused ? t('genius.paused') : cooling ? t('genius.cooldown') : data.running ? t('genius.running') : data.pending > 0 ? t('genius.queued') : t('genius.waiting');
+  const processed = data ? Math.max(0, data.total - data.pending) : 0;
+  const formatNumber = (value: number) => value.toLocaleString(i18n.language);
   return <section className={s.section} aria-label="Genius">
     <div className={s.head}><h2>Genius</h2><span role="status">{state}</span></div>
     <p className={s.subtitle}>{t('genius.description')}</p>
     <FormError>{stats.error ? errorText(stats.error) : control.error ? errorText(control.error) : null}</FormError>
     {data && <>
       {!data.configured && <p>{t('genius.configure')}</p>}
+      {data.total > 0 && <div className={g.progress}>
+        <span>{t('genius.progress', { processed: formatNumber(processed), total: formatNumber(data.total) })}</span>
+        <progress aria-label={t('genius.progress_label')} value={processed} max={data.total} />
+        <p className={s.subtitle}>{t('genius.progress_hint')}</p>
+      </div>}
       <dl className={g.stats}>
         {(['total', 'pending', 'matched', 'lyrics', 'annotations', 'images', 'unmatched', 'errors'] as const).map((key) =>
-          <div key={key}><dt>{t(`genius.${key}`)}</dt><dd>{data[key].toLocaleString()}</dd></div>)}
+          <div key={key}><dt>{t(`genius.${key}`)}</dt><dd>{formatNumber(data[key])}</dd></div>)}
       </dl>
       {data.last_error && <p role="alert">{t('genius.last_error')}: {data.last_error === 'http_401' ? t('genius.token_error') : data.last_error === 'http_403' ? t('genius.access_error') : data.last_error === 'http_429' ? t('genius.cooldown') : data.last_error === 'lyrics_unavailable' ? t('genius.no_lyrics') : t('genius.request_error')}</p>}
       {cooling && <p>{t('genius.resume_at')}: {new Date(data.cooldown_until).toLocaleString()}</p>}
@@ -41,6 +48,8 @@ export function GeniusPanel() {
         <Button disabled={!data.configured || control.isPending} onClick={() => control.mutate(data.paused ? 'start' : 'pause')}>{t(data.paused ? 'genius.start' : 'genius.pause')}</Button>
         <Button disabled={!data.configured || control.isPending || data.errors + data.unmatched === 0} onClick={() => control.mutate('retry')}>{t('genius.retry')}</Button>
       </div>
+      <p className={s.subtitle}>{t('genius.controls_hint')}</p>
+      <p className={s.subtitle}>{t('genius.retry_hint')}</p>
     </>}
   </section>;
 }