From 65c8a5595f7d81918ceb558fea02aba6d0f4ed02 Mon Sep 17 00:00:00 2001
From: Li Xin <lixin.henry@bytedance.com>
Date: Sun, 20 Apr 2025 21:33:03 +0800
Subject: [PATCH] feat: add Tooltips

---
 web/src/app/_components/theme-toggle.tsx | 16 ++++++++++------
 web/src/app/page.tsx                     | 16 +++++++++++-----
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/web/src/app/_components/theme-toggle.tsx b/web/src/app/_components/theme-toggle.tsx
index 957f8c5..1f5dc23 100644
--- a/web/src/app/_components/theme-toggle.tsx
+++ b/web/src/app/_components/theme-toggle.tsx
@@ -12,17 +12,21 @@ import {
   DropdownMenuTrigger,
 } from "~/components/ui/dropdown-menu";
 
+import { Tooltip } from "./tooltip";
+
 export function ThemeToggle() {
   const { setTheme } = useTheme();
 
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="ghost" size="icon">
-          <Sun className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
-          <Moon className="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
-        </Button>
-      </DropdownMenuTrigger>
+      <Tooltip title="Change theme">
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" size="icon">
+            <Sun className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90" />
+            <Moon className="absolute h-[1.2rem] w-[1.2rem] scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0" />
+          </Button>
+        </DropdownMenuTrigger>
+      </Tooltip>
       <DropdownMenuContent align="end">
         <DropdownMenuItem onClick={() => setTheme("light")}>
           Light
diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx
index 2d904b3..7623a4f 100644
--- a/web/src/app/page.tsx
+++ b/web/src/app/page.tsx
@@ -15,6 +15,7 @@ import { Logo } from "./_components/logo";
 import { MessagesBlock } from "./_components/messages-block";
 import { ResearchBlock } from "./_components/research-block";
 import { ThemeToggle } from "./_components/theme-toggle";
+import { Tooltip } from "./_components/tooltip";
 
 export default function HomePage() {
   const openResearchId = useStore((state) => state.openResearchId);
@@ -27,11 +28,16 @@ export default function HomePage() {
       <header className="fixed top-0 left-0 flex h-12 w-full w-screen items-center justify-between px-4">
         <Logo />
         <div className="flex items-center">
-          <Button variant="ghost" size="icon" asChild>
-            <Link href="https://github.com/bytedance/deer-flow" target="_blank">
-              <GithubOutlined />
-            </Link>
-          </Button>
+          <Tooltip title="Visit DeerFlow on GitHub">
+            <Button variant="ghost" size="icon" asChild>
+              <Link
+                href="https://github.com/bytedance/deer-flow"
+                target="_blank"
+              >
+                <GithubOutlined />
+              </Link>
+            </Button>
+          </Tooltip>
           <ThemeToggle />
         </div>
       </header>