فهرست منبع

refactor(Header.tsx, release-notes-dialog.tsx, workout-session-list.tsx): replace InlineTooltip with div elements for tooltips to simplify the code structure and improve consistency across components

Mathias 1 ماه پیش
والد
کامیت
8502d2785a

+ 3 - 4
src/features/layout/Header.tsx

@@ -8,7 +8,6 @@ import Logo from "@public/logo.png";
 import { ReleaseNotesDialog } from "@/features/release-notes";
 import { useLogout } from "@/features/auth/model/useLogout";
 import { useSession } from "@/features/auth/lib/auth-client";
-import { InlineTooltip } from "@/components/ui/tooltip";
 import { Link } from "@/components/ui/link";
 
 export const Header = () => {
@@ -46,10 +45,10 @@ export const Header = () => {
 
       {/* User Menu */}
       <div className="navbar-end">
-        <Link aria-label={t("commons.home")} className="hover:bg-slate-100 rounded-full p-2 transition" href="/">
-          <InlineTooltip title={t("commons.home")}>
+        <Link aria-label={t("commons.home")} className="hover:bg-slate-100 rounded-full p-2 transition flex" href="/">
+          <div className="tooltip" data-tip={t("commons.home")}>
             <Home className="w-6 h-6 text-blue-500" />
-          </InlineTooltip>
+          </div>
         </Link>
 
         <ReleaseNotesDialog />

+ 2 - 3
src/features/release-notes/ui/release-notes-dialog.tsx

@@ -5,7 +5,6 @@ import { Bell } from "lucide-react";
 
 import { useCurrentLocale, useI18n } from "locales/client";
 import { formatDate } from "@/shared/lib/date";
-import { InlineTooltip } from "@/components/ui/tooltip";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
 
@@ -19,9 +18,9 @@ export function ReleaseNotesDialog() {
     <Dialog>
       <DialogTrigger asChild>
         <Button aria-label={t("release_notes.release_notes")} className="rounded-full hover:bg-slate-100" size="small" variant="ghost">
-          <InlineTooltip title={t("commons.changelog")}>
+          <div className="tooltip" data-tip={t("commons.changelog")}>
             <Bell className="text-blue-500 h-6 w-6" />
-          </InlineTooltip>
+          </div>
         </Button>
       </DialogTrigger>
       <DialogContent className="max-w-md">

+ 4 - 5
src/features/workout-session/ui/workout-session-list.tsx

@@ -4,7 +4,6 @@ import { Repeat2, Trash2 } from "lucide-react";
 import { useCurrentLocale, useI18n } from "locales/client";
 import { useWorkoutSessions } from "@/features/workout-session/model/use-workout-sessions";
 import { useWorkoutBuilderStore } from "@/features/workout-builder/model/workout-builder.store";
-import { InlineTooltip } from "@/components/ui/tooltip";
 import { Button } from "@/components/ui/button";
 
 const BADGE_COLORS = [
@@ -117,7 +116,7 @@ export function WorkoutSessionList() {
                 })}
               </div>
               <div className="flex gap-2 items-center mt-2 sm:mt-0">
-                <InlineTooltip title={t("workout_builder.session.repeat")}>
+                <div className="tooltip" data-tip={t("workout_builder.session.repeat")}>
                   <Button
                     aria-label={t("workout_builder.session.repeat")}
                     className="w-12 h-12"
@@ -127,8 +126,8 @@ export function WorkoutSessionList() {
                   >
                     <Repeat2 className="w-7 h-7 text-blue-500" />
                   </Button>
-                </InlineTooltip>
-                <InlineTooltip title={t("workout_builder.session.delete")}>
+                </div>
+                <div className="tooltip" data-tip={t("workout_builder.session.delete")}>
                   <Button
                     aria-label={t("workout_builder.session.delete")}
                     onClick={() => handleDelete(session.id)}
@@ -137,7 +136,7 @@ export function WorkoutSessionList() {
                   >
                     <Trash2 className="w-7 h-7 text-red-500" />
                   </Button>
-                </InlineTooltip>
+                </div>
               </div>
             </li>
           );