feat: use ghost button

src/renderer/src/components/entry-content/share.tsx

@@ -4,9 +4,9 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@renderer/components/ui/tooltip"
-import { cn } from "@renderer/lib/utils"
 import { useEntryActions } from "@renderer/hooks/useEntryActions"
 import { ActivedEntry } from "@renderer/lib/types"
+import { Button } from "@renderer/components/ui/button"
 
 export function EntryShare({
   view,
@@ -24,25 +24,25 @@ export function EntryShare({
   })
 
   return (
-    <div className="px-5 h-14 flex items-center text-lg justify-end text-zinc-500 gap-5">
-      <TooltipProvider delayDuration={300}>
+    <div className="px-5 h-14 flex items-center text-lg justify-end text-zinc-500 gap-3">
+      <TooltipProvider>
         {items
           .filter((item) => !item.disabled)
           .map((item) => (
             <Tooltip key={item.name}>
-              <TooltipTrigger className="flex items-center my-2">
-                {item.icon ? (
-                  <img
-                    className="w-4 h-4 grayscale no-drag-region"
-                    src={item.icon}
-                    onClick={() => execAction(item.action)}
-                  />
-                ) : (
-                  <i
-                    className={cn(item.className, "no-drag-region")}
-                    onClick={() => execAction(item.action)}
-                  />
-                )}
+              <TooltipTrigger asChild>
+                <Button
+                  className="flex items-center text-xl no-drag-region"
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => execAction(item.action)}
+                >
+                  {item.icon ? (
+                    <img className="w-4 h-4 grayscale" src={item.icon} />
+                  ) : (
+                    <i className={item.className} />
+                  )}
+                </Button>
               </TooltipTrigger>
               <TooltipContent side="bottom">{item.name}</TooltipContent>
             </Tooltip>

src/renderer/src/components/feed-column/index.tsx

@@ -14,6 +14,7 @@ import { ActivedList } from "@renderer/lib/types"
 import { UserButton } from "@renderer/components/user-button"
 import { levels, views } from "@renderer/lib/constants"
 import { Link } from "react-router-dom"
+import { Button } from "@renderer/components/ui/button"
 
 const lethargy = new Lethargy()
 
@@ -72,44 +73,52 @@ export function FeedColumn({
         })
       }
     >
-      <div className="mx-5 flex items-center justify-between">
+      <div className="ml-5 mr-3 flex items-center justify-between">
         <div className="font-bold text-xl flex items-center gap-1">
           <img src="./icon.svg" alt="logo" className="h-5 w-5" />
           Follow
         </div>
-        <div className="flex items-center gap-2">
-          <Link to={`/profile`} className="flex">
-            <UserButton className="h-5 p-0" hideName={true} />
-          </Link>
-          <Link to={`/follow`} className="flex">
-            <i className="i-mingcute-add-circle-line h-5 w-5 text-zinc-500" />
-          </Link>
+        <div className="flex items-center">
+          <Button variant="ghost" size="sm">
+            <Link to={`/profile`} className="flex">
+              <UserButton className="h-5 p-0" hideName={true} />
+            </Link>
+          </Button>
+          <Button variant="ghost" size="sm">
+            <Link to={`/follow`} className="flex">
+              <i className="i-mingcute-add-circle-line h-5 w-5 text-zinc-500" />
+            </Link>
+          </Button>
         </div>
       </div>
-      <div className="flex text-zinc-500 w-full justify-between text-xl px-5">
-        <TooltipProvider delayDuration={300}>
+      <div className="flex text-zinc-500 w-full justify-between text-xl px-3">
+        <TooltipProvider>
           {views.map((item, index) => (
-            <div
-              key={item.name}
-              className={cn(active === index && item.className)}
-              onClick={(e) => {
-                setActive(index)
-                setActivedList?.({
-                  level: "view",
-                  id: index,
-                  name: views[index].name,
-                  view: index,
-                })
-                e.stopPropagation()
-              }}
-            >
-              <Tooltip>
-                <TooltipTrigger className="flex items-center my-2">
+            <Tooltip key={item.name}>
+              <TooltipTrigger asChild>
+                <Button
+                  className={cn(
+                    active === index && item.className,
+                    "flex items-center text-xl",
+                  )}
+                  variant="ghost"
+                  size="sm"
+                  onClick={(e) => {
+                    setActive(index)
+                    setActivedList?.({
+                      level: "view",
+                      id: index,
+                      name: views[index].name,
+                      view: index,
+                    })
+                    e.stopPropagation()
+                  }}
+                >
                   {item.icon}
-                </TooltipTrigger>
-                <TooltipContent side="bottom">{item.name}</TooltipContent>
-              </Tooltip>
-            </div>
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent side="bottom">{item.name}</TooltipContent>
+            </Tooltip>
           ))}
         </TooltipProvider>
       </div>

src/renderer/src/components/ui/button.tsx

@@ -16,12 +16,12 @@ const buttonVariants = cva(
           "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
+        ghost: "hover:bg-zinc-500/10",
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
         default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-3",
+        sm: "h-8 rounded-md px-1.5",
         lg: "h-11 rounded-md px-8",
         xl: "h-14 rounded-lg px-10",
         icon: "h-10 w-10",