chore: refactor tooltip usage and remove unused components

frontend/web/src/App.tsx

@@ -1,6 +1,7 @@
 import { useTheme } from "next-themes";
 import { useEffect } from "react";
 import { Outlet } from "react-router-dom";
+import { TooltipProvider } from "@/components/ui/tooltip";
 import { useWorkspaceStore } from "@/stores";
 import useNavigateTo from "./hooks/useNavigateTo";
 import { FeatureType } from "./stores/workspace";
@@ -63,9 +64,9 @@ function App() {
   }, [colorScheme]);
 
   return (
-    <>
+    <TooltipProvider>
       <Outlet />
-    </>
+    </TooltipProvider>
   );
 }
 

frontend/web/src/components/CollectionView.tsx

@@ -4,7 +4,7 @@ import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import { toast } from "sonner";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { absolutifyLink } from "@/helpers/utils";
 import useNavigateTo from "@/hooks/useNavigateTo";
 import useResponsiveWidth from "@/hooks/useResponsiveWidth";
@@ -76,7 +76,6 @@ const CollectionView = (props: Props) => {
             <p className="text-sm text-muted-foreground">{collection.description}</p>
           </div>
           <div className="flex flex-row justify-end items-center shrink-0 gap-2">
-            <TooltipProvider>
             <Tooltip>
               <TooltipTrigger asChild>
                 <Link
@@ -89,8 +88,6 @@ const CollectionView = (props: Props) => {
               </TooltipTrigger>
               <TooltipContent>Share</TooltipContent>
             </Tooltip>
-            </TooltipProvider>
-            <TooltipProvider>
             <Tooltip>
               <TooltipTrigger asChild>
                 <button
@@ -102,7 +99,6 @@ const CollectionView = (props: Props) => {
               </TooltipTrigger>
               <TooltipContent>Open all</TooltipContent>
             </Tooltip>
-            </TooltipProvider>
             {showAdminActions && (
               <Dropdown
                 trigger={

frontend/web/src/components/ShortcutCard.tsx

@@ -4,10 +4,10 @@ import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import { toast } from "sonner";
-import { AnimatedCard } from "@/components/ui/animated-card";
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { Card } from "@/components/ui/card";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { absolutifyLink } from "@/helpers/utils";
 import { useUserStore, useViewStore } from "@/stores";
 import { Shortcut } from "@/types/proto/api/v1/shortcut_service";
@@ -38,10 +38,7 @@ const ShortcutCard = (props: Props) => {
   };
 
   return (
-    <TooltipProvider>
-      <AnimatedCard
-        className={classNames("group p-4 w-full flex flex-col justify-start items-start hover:shadow-md transition-shadow duration-200")}
-      >
+    <Card className={classNames("group p-4 w-full flex flex-col justify-start items-start hover:shadow-md transition-shadow duration-200")}>
       <div className="w-full flex flex-row justify-between items-center">
         <div className="w-[calc(100%-16px)] flex flex-row justify-start items-center mr-1 shrink-0">
           <Link
@@ -155,8 +152,7 @@ const ShortcutCard = (props: Props) => {
           </TooltipContent>
         </Tooltip>
       </div>
-      </AnimatedCard>
-    </TooltipProvider>
+    </Card>
   );
 };
 

frontend/web/src/components/ui/animated-card.tsx

@@ -1,22 +0,0 @@
-import { motion } from "framer-motion";
-import { forwardRef } from "react";
-import { Card, CardProps } from "@/components/ui/card";
-
-const AnimatedCard = forwardRef<HTMLDivElement, CardProps>(({ className, children, ...props }, ref) => {
-  return (
-    <motion.div
-      initial={{ opacity: 0, y: 20 }}
-      animate={{ opacity: 1, y: 0 }}
-      transition={{ duration: 0.2, ease: "easeOut" }}
-      whileHover={{ y: -2 }}
-    >
-      <Card ref={ref} className={className} {...props}>
-        {children}
-      </Card>
-    </motion.div>
-  );
-});
-
-AnimatedCard.displayName = "AnimatedCard";
-
-export { AnimatedCard };

frontend/web/src/components/ui/input.tsx

@@ -6,7 +6,7 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
     <input
       type={type}
       className={cn(
-        "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "flex h-9 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         className,
       )}
       ref={ref}

frontend/web/src/pages/ShortcutDashboard.tsx

@@ -49,10 +49,10 @@ const ShortcutDashboard: React.FC = () => {
     <>
       <div className="mx-auto max-w-8xl w-full px-4 sm:px-6 md:px-12 pt-4 pb-6 flex flex-col justify-start items-start">
         <ShortcutsNavigator />
-        <div className="w-full flex flex-row justify-between items-center mb-4">
+        <div className="w-full flex flex-row justify-between items-center mb-4 gap-2">
           <div className="flex flex-row justify-start items-center">
             <Input
-              className="w-32 mr-2"
+              className="w-32"
               type="text"
               placeholder={t("common.search")}
               value={filter.search}

frontend/web/src/pages/ShortcutDetail.tsx

@@ -12,7 +12,7 @@ import Icon from "@/components/Icon";
 import LinkFavicon from "@/components/LinkFavicon";
 import VisibilityIcon from "@/components/VisibilityIcon";
 import Dropdown from "@/components/common/Dropdown";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { absolutifyLink } from "@/helpers/utils";
 import useLoading from "@/hooks/useLoading";
 import useNavigateTo from "@/hooks/useNavigateTo";
@@ -104,7 +104,6 @@ const ShortcutDetail = () => {
           </span>
         </a>
         <div className="mt-2 w-full flex flex-row justify-normal items-center space-x-2">
-          <TooltipProvider>
           <Tooltip>
             <TooltipTrigger asChild>
               <button
@@ -116,8 +115,6 @@ const ShortcutDetail = () => {
             </TooltipTrigger>
             <TooltipContent>Copy</TooltipContent>
           </Tooltip>
-          </TooltipProvider>
-          <TooltipProvider>
           <Tooltip>
             <TooltipTrigger asChild>
               <button
@@ -129,7 +126,6 @@ const ShortcutDetail = () => {
             </TooltipTrigger>
             <TooltipContent>QR Code</TooltipContent>
           </Tooltip>
-          </TooltipProvider>
           {havePermission && (
             <Dropdown
               className="w-8 h-8 flex justify-center items-center border border-border cursor-pointer rounded-full hover:bg-accent hover:shadow"
@@ -172,7 +168,6 @@ const ShortcutDetail = () => {
           {shortcut.tags.length === 0 && <span className="text-muted-foreground text-sm leading-4 italic">No tags</span>}
         </div>
         <div className="w-full flex mt-4 gap-2">
-          <TooltipProvider>
           <Tooltip>
             <TooltipTrigger asChild>
               <div className="w-auto px-2 leading-6 flex flex-row justify-start items-center border border-border rounded-full text-muted-foreground text-sm">
@@ -182,8 +177,6 @@ const ShortcutDetail = () => {
             </TooltipTrigger>
             <TooltipContent>Creator</TooltipContent>
           </Tooltip>
-          </TooltipProvider>
-          <TooltipProvider>
           <Tooltip>
             <TooltipTrigger asChild>
               <div className="w-auto px-2 leading-6 flex flex-row justify-start items-center border border-border rounded-full text-muted-foreground text-sm">
@@ -193,8 +186,6 @@ const ShortcutDetail = () => {
             </TooltipTrigger>
             <TooltipContent>{t(`shortcut.visibility.${shortcut.visibility.toLowerCase()}.description`)}</TooltipContent>
           </Tooltip>
-          </TooltipProvider>
-          <TooltipProvider>
           <Tooltip>
             <TooltipTrigger asChild>
               <div className="w-auto px-2 leading-6 flex flex-row justify-start items-center border border-border rounded-full text-muted-foreground text-sm">
@@ -204,7 +195,6 @@ const ShortcutDetail = () => {
             </TooltipTrigger>
             <TooltipContent>View count</TooltipContent>
           </Tooltip>
-          </TooltipProvider>
         </div>
 
         <div className="w-full flex flex-col mt-8">

frontend/web/src/pages/WorkspaceSetting.tsx

@@ -1,10 +1,9 @@
-import { useEffect } from "react";
 import { Link } from "react-router-dom";
+import { toast } from "sonner";
 import Icon from "@/components/Icon";
 import WorkspaceGeneralSettingSection from "@/components/setting/WorkspaceGeneralSettingSection";
 import WorkspaceMembersSection from "@/components/setting/WorkspaceMembersSection";
 import WorkspaceSecuritySection from "@/components/setting/WorkspaceSecuritySection";
-import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
 import { useUserStore, useWorkspaceStore } from "@/stores";
@@ -16,22 +15,13 @@ const WorkspaceSetting = () => {
   const currentUser = useUserStore().getCurrentUser();
   const isAdmin = currentUser.role === Role.ADMIN;
 
-  useEffect(() => {
-    if (!isAdmin) {
-      window.location.href = "/";
-    }
-  }, []);
-
   if (!isAdmin) {
+    toast.error("Only workspace admins can access workspace settings.");
     return null;
   }
 
   return (
     <div className="mx-auto max-w-8xl w-full px-4 sm:px-6 md:px-12 py-6 flex flex-col justify-start items-start gap-y-12">
-      <Alert variant="default" className="border-primary bg-muted">
-        <Icon.Info className="h-4 w-4" />
-        <AlertDescription>You can see the settings items below because you are an Admin.</AlertDescription>
-      </Alert>
       <div className="w-full flex flex-col">
         <p className="text-2xl shrink-0 font-semibold text-foreground">Subscription</p>
         <div className="mt-2">