From 41f40b6e71c4650c7b37e514c4810a08d959586e Mon Sep 17 00:00:00 2001
From: Nexmoe <16796652+nexmoe@users.noreply.github.com>
Date: Fri, 19 Dec 2025 18:03:03 +0800
Subject: [PATCH] Use icon tabs with tooltips (#38)

* feat: icon tabs with tooltips

* chore: add conductor config
---
 conductor.json                  |  6 ++++++
 src/renderer/src/pages/Home.tsx | 35 ++++++++++++++++++++++++++-------
 2 files changed, 34 insertions(+), 7 deletions(-)
 create mode 100644 conductor.json

diff --git a/conductor.json b/conductor.json
new file mode 100644
index 0000000..5ce006c
--- /dev/null
+++ b/conductor.json
@@ -0,0 +1,6 @@
+{
+  "scripts": {
+    "setup": "cp $CONDUCTOR_ROOT_PATH/resources/ resources/ &&  pnpm install",
+    "run": "pnpm run dev"
+  }
+}
diff --git a/src/renderer/src/pages/Home.tsx b/src/renderer/src/pages/Home.tsx
index 53ea41f..a18eaad 100644
--- a/src/renderer/src/pages/Home.tsx
+++ b/src/renderer/src/pages/Home.tsx
@@ -16,10 +16,11 @@ import {
   SelectValue
 } from '@renderer/components/ui/select'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@renderer/components/ui/tabs'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@renderer/components/ui/tooltip'
 import { popularSites } from '@renderer/data/popularSites'
 import type { AppSettings, OneClickQualityPreset, PlaylistInfo } from '@shared/types'
 import { useAtom, useSetAtom } from 'jotai'
-import { AlertCircle, Download, Loader2, Search } from 'lucide-react'
+import { AlertCircle, Download, List, Loader2, Play, Search } from 'lucide-react'
 import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { toast } from 'sonner'
@@ -569,12 +570,32 @@ export function Home({ onOpenSupportedSites, onOpenSettings }: HomeProps) {
                 </CardDescription>
               </div>
               <TabsList className="grid grid-cols-2">
-                <TabsTrigger value="single" className="flex items-center gap-2">
-                  {t('download.singleVideo')}
-                </TabsTrigger>
-                <TabsTrigger value="playlist" className="flex items-center gap-2">
-                  {t('playlist.title')}
-                </TabsTrigger>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <TabsTrigger
+                      value="single"
+                      aria-label={t('download.singleVideo')}
+                      className="flex items-center justify-center data-[state=inactive]:text-muted-foreground data-[state=active]:bg-primary/10 data-[state=active]:text-primary"
+                    >
+                      <Play className="h-4 w-4" />
+                      <span className="sr-only">{t('download.singleVideo')}</span>
+                    </TabsTrigger>
+                  </TooltipTrigger>
+                  <TooltipContent side="bottom">{t('download.singleVideo')}</TooltipContent>
+                </Tooltip>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <TabsTrigger
+                      value="playlist"
+                      aria-label={t('playlist.title')}
+                      className="flex items-center justify-center data-[state=inactive]:text-muted-foreground data-[state=active]:bg-primary/10 data-[state=active]:text-primary"
+                    >
+                      <List className="h-4 w-4" />
+                      <span className="sr-only">{t('playlist.title')}</span>
+                    </TabsTrigger>
+                  </TooltipTrigger>
+                  <TooltipContent side="bottom">{t('playlist.title')}</TooltipContent>
+                </Tooltip>
               </TabsList>
             </div>
           </CardHeader>