Add cursor-pointer and tooltip to Telegram copy button

This commit is contained in:
Paulo Castellano 2026-06-14 09:42:31 -03:00
parent d5da44fd75
commit ec5a3a3b16
4 changed files with 36 additions and 12 deletions

View file

@ -92,6 +92,7 @@
'connected' => 'Channel connected!',
'connected_toast' => 'Telegram channel connected successfully!',
'copied_toast' => 'Command copied to clipboard',
'copy_tooltip' => 'Copy command',
'expired' => 'This code has expired. Generate a new one to try again.',
'new_code' => 'Generate a new code',
'retry' => 'Try again',

View file

@ -92,6 +92,7 @@
'connected' => '¡Canal conectado!',
'connected_toast' => '¡Canal de Telegram conectado correctamente!',
'copied_toast' => 'Comando copiado al portapapeles',
'copy_tooltip' => 'Copiar comando',
'expired' => 'Este código ha caducado. Genera uno nuevo para volver a intentarlo.',
'new_code' => 'Generar un nuevo código',
'retry' => 'Reintentar',

View file

@ -92,6 +92,7 @@
'connected' => 'Canal conectado!',
'connected_toast' => 'Canal do Telegram conectado com sucesso!',
'copied_toast' => 'Comando copiado para a área de transferência',
'copy_tooltip' => 'Copiar comando',
'expired' => 'Este código expirou. Gere um novo para tentar de novo.',
'new_code' => 'Gerar um novo código',
'retry' => 'Tentar novamente',

View file

@ -14,6 +14,12 @@ import {
DialogHeader,
DialogTitle,
} from '@/components/ui/dialog';
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from '@/components/ui/tooltip';
import { copyToClipboard } from '@/lib/utils';
import {
connect as connectTelegram,
@ -203,18 +209,33 @@ onUnmounted(stopPolling);
<span>{{
$t('accounts.telegram.step_command')
}}</span>
<button
type="button"
class="group flex w-full items-center justify-between gap-2 rounded-lg border bg-muted px-3 py-2 text-left font-mono text-sm transition-colors hover:bg-muted/70"
@click="copyCommand"
>
<span class="min-w-0 truncate"
>/connect {{ code }}</span
>
<IconCopy
class="size-4 shrink-0 text-muted-foreground group-hover:text-foreground"
/>
</button>
<TooltipProvider>
<Tooltip>
<TooltipTrigger as-child>
<button
type="button"
class="group flex w-full cursor-pointer items-center justify-between gap-2 rounded-lg border bg-muted px-3 py-2 text-left font-mono text-sm transition-colors hover:bg-muted/70"
@click="copyCommand"
>
<span class="min-w-0 truncate"
>/connect {{ code }}</span
>
<IconCopy
class="size-4 shrink-0 text-muted-foreground group-hover:text-foreground"
/>
</button>
</TooltipTrigger>
<TooltipContent>
<p>
{{
$t(
'accounts.telegram.copy_tooltip',
)
}}
</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
</li>
</ol>