fix(connection): Happ TV quick-connect is Happ-only + matches config-block styles

The TV quick-connect block (Подключить TV / Сканировать QR) is a Happ-only
feature (check.happ.su/sendtv), but it rendered for ANY app on a TV platform and
used one-off button styles (solid btn-primary + grey btn-secondary) that clashed
with the outlined-accent buttons that come from the subscription-page config.

- Show TvQuickConnect only for the Happ app (detected by its happ:// deep-link
  scheme, name as fallback).
- Extract the config-block button style into a shared blockButtonClass and use it
  for the TV buttons too, so they adapt to exactly the same visual language as the
  panel-config blocks (no divergent one-off styling).
- Align the code input with the Happ Android TV API doc (5-digit numeric):
  placeholder 12345 + inputMode numeric. The send call already matches the spec
  (POST check.happ.su/sendtv/{code}, body {"data": base64(subscriptionUrl)}).
This commit is contained in:
c0mrade
2026-06-03 15:49:58 +03:00
parent b210a04dbb
commit 5855a88dc6
4 changed files with 39 additions and 15 deletions

View File

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
import { CheckIcon, CopyIcon } from '@/components/icons';
import type { RemnawaveButtonClient, LocalizedText } from '@/types';
import { copyToClipboard } from '@/utils/clipboard';
import { blockButtonClass } from './buttonStyles';
// eslint-disable-next-line no-script-url
const dangerousSchemes = ['javascript:', 'data:', 'vbscript:', 'file:'];
@@ -57,14 +58,7 @@ export function BlockButtons({
if (!buttons || buttons.length === 0) return null;
const baseClass =
variant === 'light'
? isLight
? 'rounded-xl border border-accent-500/50 px-4 py-2 text-sm font-medium text-accent-600 shadow-sm transition-all hover:bg-accent-500/10'
: 'rounded-xl border border-accent-500/40 px-4 py-2 text-sm font-medium text-accent-400 transition-all hover:bg-accent-500/10'
: isLight
? 'rounded-xl px-3 py-1.5 text-sm font-medium text-dark-300 transition-all hover:bg-dark-700/30'
: 'rounded-xl px-3 py-1.5 text-sm font-medium text-dark-300 transition-all hover:bg-dark-700/50';
const baseClass = blockButtonClass(variant, isLight);
return (
<div className="mt-3 flex flex-wrap gap-2">