From 1ff2abc16a096c6e433d97f80333d485acf1997a Mon Sep 17 00:00:00 2001
From: Jose Selesan <jose.selesan@solotechnologies.us>
Date: Wed, 17 Jun 2026 09:01:28 -0300
Subject: [PATCH] feat(header): add Telegram icon and link to settings based on
 connection status

---
 .../frontend/src/components/layout/Header.tsx | 28 +++++++++++++++++
 apps/frontend/src/features/belo/BeloPage.tsx  | 30 +------------------
 2 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/apps/frontend/src/components/layout/Header.tsx b/apps/frontend/src/components/layout/Header.tsx
index 2a9b906..513c2fe 100644
--- a/apps/frontend/src/components/layout/Header.tsx
+++ b/apps/frontend/src/components/layout/Header.tsx
@@ -1,8 +1,23 @@
+import { Link } from "@tanstack/react-router";
 import { LogOut, Menu, Monitor, Moon, Sun } from "lucide-react";
+
+function TelegramIcon(props: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      className={props.className}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z" />
+    </svg>
+  );
+}
 import { Button } from "@/components/ui/button";
 import { useAuth } from "@/lib/auth-context";
 import { useSseStatus } from "@/lib/sse-context";
 import { useTheme } from "@/lib/theme";
+import { useTelegramStatus } from "@/lib/queries";
 import { cn } from "@/lib/utils";
 
 interface HeaderProps {
@@ -13,6 +28,7 @@ export function Header({ onMenuClick }: HeaderProps) {
   const sseStatus = useSseStatus();
   const { theme, cycleTheme } = useTheme();
   const auth = useAuth();
+  const { data: telegramStatus } = useTelegramStatus();
 
   const ThemeIcon = theme === "light" ? Sun : theme === "dark" ? Moon : Monitor;
   const themeLabel =
@@ -58,6 +74,18 @@ export function Header({ onMenuClick }: HeaderProps) {
         >
           <ThemeIcon className="size-4" />
         </Button>
+        <Link
+          to="/settings"
+          className={cn(
+            "inline-flex items-center justify-center rounded-md p-1.5 transition-colors",
+            telegramStatus?.connected
+              ? "text-emerald-500 hover:text-emerald-400"
+              : "text-muted-foreground hover:text-foreground",
+          )}
+          title={telegramStatus?.connected ? "Telegram conectado" : "Conectar Telegram"}
+        >
+          <TelegramIcon className="size-4" />
+        </Link>
         <span
           className={cn(
             "size-2 rounded-full",
diff --git a/apps/frontend/src/features/belo/BeloPage.tsx b/apps/frontend/src/features/belo/BeloPage.tsx
index f03ed0d..591e2e9 100644
--- a/apps/frontend/src/features/belo/BeloPage.tsx
+++ b/apps/frontend/src/features/belo/BeloPage.tsx
@@ -1,5 +1,5 @@
 import { Link } from "@tanstack/react-router";
-import { BarChart3, MessageCircle, RefreshCw } from "lucide-react";
+import { BarChart3, RefreshCw } from "lucide-react";
 import { useMemo, useState } from "react";
 import {
   CartesianGrid,
@@ -24,7 +24,6 @@ import {
   useFetchQuotes,
   useQuoteHistory,
   useQuotes,
-  useTelegramStatus,
 } from "@/lib/queries";
 import { RelativeTime } from "@/lib/time";
 import { cn } from "@/lib/utils";
@@ -58,32 +57,6 @@ function getGaugeColor(percentage: number | null): string {
   return "text-red-500";
 }
 
-function TelegramBadge() {
-  const { data: status } = useTelegramStatus();
-
-  if (status?.connected) {
-    return (
-      <Link
-        to="/settings"
-        className="inline-flex items-center gap-1.5 text-xs text-emerald-600 dark:text-emerald-400 hover:underline"
-      >
-        <MessageCircle className="h-3.5 w-3.5" />
-        Telegram conectado
-      </Link>
-    );
-  }
-
-  return (
-    <Link
-      to="/settings"
-      className="inline-flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
-    >
-      <MessageCircle className="h-3.5 w-3.5" />
-      Conectar Telegram
-    </Link>
-  );
-}
-
 function StatCard({
   label,
   buy,
@@ -258,7 +231,6 @@ export function BeloPage() {
               Últ. actualización: <RelativeTime date={belo.timeStamp} />
             </span>
           )}
-          <TelegramBadge />
           <Link
             to="/quotes/analysis/$currency"
             params={{ currency: "BELO" }}