Skip to content

Commit 97796c0

Browse files
CrauzerCrauzer
authored
Merge pull request #24 from LeagueToolkit/tooltip-refactor
refactor: enhance Tooltip integration across components
2 parents 35948e4 + 3b60db8 commit 97796c0

File tree

16 files changed

+215
-178
lines changed

16 files changed

+215
-178
lines changed

‎src/components/Tooltip.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -125,8 +125,8 @@ export const TooltipArrow = forwardRef<HTMLDivElement, TooltipArrowProps>(
125125
);
126126
TooltipArrow.displayName = "Tooltip.Arrow";
127127

128-
// Compound export
129-
export const Tooltip = {
128+
// Compound export (primitives for advanced/custom tooltip layouts)
129+
export const TooltipPrimitives = {
130130
Provider: TooltipProvider,
131131
Root: TooltipRoot,
132132
Trigger: TooltipTrigger,
@@ -136,8 +136,7 @@ export const Tooltip = {
136136
Arrow: TooltipArrow,
137137
};
138138

139-
// Simplified Tooltip component for common use cases
140-
export interface SimpleTooltipProps {
139+
export interface TooltipProps {
141140
content: ReactNode;
142141
children: ReactNode;
143142
side?: "top" | "right" | "bottom" | "left";
@@ -146,14 +145,14 @@ export interface SimpleTooltipProps {
146145
showArrow?: boolean;
147146
}
148147

149-
export function SimpleTooltip({
148+
export function Tooltip({
150149
content,
151150
children,
152151
side = "top",
153152
align = "center",
154153
sideOffset = 8,
155154
showArrow = true,
156-
}: SimpleTooltipProps) {
155+
}: TooltipProps) {
157156
return (
158157
<BaseTooltip.Root>
159158
<BaseTooltip.Trigger className="inline-flex">{children}</BaseTooltip.Trigger>

‎src/modules/library/components/FilterPopover.tsx‎

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { LuFilter, LuX } from "react-icons/lu";
22

3-
import { Checkbox, IconButton, Popover } from "@/components";
3+
import { Checkbox, IconButton, Popover, Tooltip } from "@/components";
44
import type { FilterOptions } from "@/modules/library/api";
55
import { getMapLabel, getTagLabel } from "@/modules/library/utils/labels";
66
import { useHasActiveFilters, useLibraryFilterStore } from "@/stores";
@@ -30,23 +30,24 @@ export function FilterPopover({ filterOptions }: FilterPopoverProps) {
3030

3131
return (
3232
<Popover.Root>
33-
<Popover.Trigger
34-
render={
35-
<IconButton
36-
icon={
37-
<div className="relative">
38-
<LuFilter className="h-4 w-4" />
39-
{hasActive && (
40-
<span className="absolute -top-1 -right-1 h-2 w-2 rounded-full bg-brand-500" />
41-
)}
42-
</div>
43-
}
44-
variant="ghost"
45-
size="sm"
46-
title="Filter mods"
47-
/>
48-
}
49-
/>
33+
<Tooltip content="Filter mods">
34+
<Popover.Trigger
35+
render={
36+
<IconButton
37+
icon={
38+
<div className="relative">
39+
<LuFilter className="h-4 w-4" />
40+
{hasActive && (
41+
<span className="absolute -top-1 -right-1 h-2 w-2 rounded-full bg-brand-500" />
42+
)}
43+
</div>
44+
}
45+
variant="ghost"
46+
size="sm"
47+
/>
48+
}
49+
/>
50+
</Tooltip>
5051
<Popover.Portal>
5152
<Popover.Positioner side="bottom" align="start" sideOffset={8}>
5253
<Popover.Popup className="w-64 p-3">

‎src/modules/library/components/LibraryToolbar.tsx‎

Lines changed: 25 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { LuFolderOpen, LuGrid3X3, LuList, LuPlus, LuSearch } from "react-icons/lu";
22

3-
import { Button, IconButton } from "@/components";
3+
import { Button, IconButton, Tooltip } from "@/components";
44
import type { PatcherStatus } from "@/lib/tauri";
55
import type { useLibraryActions } from "@/modules/library/api";
66
import { useLibraryViewMode } from "@/modules/library/api";
@@ -44,13 +44,14 @@ export function LibraryToolbar({
4444
>
4545
<ProfileSelector />
4646

47-
<IconButton
48-
icon={<LuFolderOpen className="h-4 w-4" />}
49-
variant="ghost"
50-
size="sm"
51-
onClick={actions.handleOpenStorageDirectory}
52-
title="Open storage directory"
53-
/>
47+
<Tooltip content="Open storage directory">
48+
<IconButton
49+
icon={<LuFolderOpen className="h-4 w-4" />}
50+
variant="ghost"
51+
size="sm"
52+
onClick={actions.handleOpenStorageDirectory}
53+
/>
54+
</Tooltip>
5455

5556
{/* Search */}
5657
<div className="relative flex-1">
@@ -68,18 +69,22 @@ export function LibraryToolbar({
6869

6970
{/* View toggle */}
7071
<div className="flex items-center gap-1">
71-
<IconButton
72-
icon={<LuGrid3X3 className="h-4 w-4" />}
73-
variant={viewMode === "grid" ? "default" : "ghost"}
74-
size="sm"
75-
onClick={() => setViewMode("grid")}
76-
/>
77-
<IconButton
78-
icon={<LuList className="h-4 w-4" />}
79-
variant={viewMode === "list" ? "default" : "ghost"}
80-
size="sm"
81-
onClick={() => setViewMode("list")}
82-
/>
72+
<Tooltip content="Grid view">
73+
<IconButton
74+
icon={<LuGrid3X3 className="h-4 w-4" />}
75+
variant={viewMode === "grid" ? "default" : "ghost"}
76+
size="sm"
77+
onClick={() => setViewMode("grid")}
78+
/>
79+
</Tooltip>
80+
<Tooltip content="List view">
81+
<IconButton
82+
icon={<LuList className="h-4 w-4" />}
83+
variant={viewMode === "list" ? "default" : "ghost"}
84+
size="sm"
85+
onClick={() => setViewMode("list")}
86+
/>
87+
</Tooltip>
8388
</div>
8489

8590
{/* Actions */}

‎src/modules/library/components/ProfileSelector/ProfileListItem.tsx‎

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useEffect, useRef, useState } from "react";
22
import { LuCheck, LuPencil, LuTrash2, LuX } from "react-icons/lu";
33

4-
import { Button, Field, IconButton, useToast } from "@/components";
4+
import { Button, Field, IconButton, Tooltip, useToast } from "@/components";
55
import type { Profile } from "@/lib/tauri";
66
import { useRenameProfile } from "@/modules/library/api";
77

@@ -115,22 +115,24 @@ export function ProfileListItem({
115115

116116
{!isDefaultProfile && (
117117
<>
118-
<IconButton
119-
icon={<LuPencil className="h-3.5 w-3.5" />}
120-
variant="ghost"
121-
size="xs"
122-
onClick={startEditing}
123-
title="Rename profile"
124-
/>
125-
<IconButton
126-
icon={<LuTrash2 className="h-3.5 w-3.5" />}
127-
variant="ghost"
128-
size="xs"
129-
onClick={() => onDeleteClick(profile)}
130-
disabled={isActive}
131-
className="hover:text-red-400"
132-
title="Delete profile"
133-
/>
118+
<Tooltip content="Rename profile">
119+
<IconButton
120+
icon={<LuPencil className="h-3.5 w-3.5" />}
121+
variant="ghost"
122+
size="xs"
123+
onClick={startEditing}
124+
/>
125+
</Tooltip>
126+
<Tooltip content="Delete profile">
127+
<IconButton
128+
icon={<LuTrash2 className="h-3.5 w-3.5" />}
129+
variant="ghost"
130+
size="xs"
131+
onClick={() => onDeleteClick(profile)}
132+
disabled={isActive}
133+
className="hover:text-red-400"
134+
/>
135+
</Tooltip>
134136
</>
135137
)}
136138
</div>

‎src/modules/settings/components/AppearanceSection/BackdropImagePicker.tsx‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { open } from "@tauri-apps/plugin-dialog";
22
import { LuImage, LuX } from "react-icons/lu";
33

4-
import { Field, IconButton } from "@/components";
4+
import { Field, IconButton, Tooltip } from "@/components";
55
import type { Settings } from "@/lib/tauri";
66

77
import { useDebouncedSlider } from "./useDebouncedSlider";
@@ -46,19 +46,23 @@ export function BackdropImagePicker({ settings, onSave }: BackdropImagePickerPro
4646
placeholder="No image selected"
4747
className="flex-1"
4848
/>
49-
<IconButton
50-
icon={<LuImage className="h-5 w-5" />}
51-
variant="outline"
52-
size="lg"
53-
onClick={handleBrowse}
54-
/>
55-
{settings.backdropImage && (
49+
<Tooltip content="Browse image">
5650
<IconButton
57-
icon={<LuX className="h-5 w-5" />}
51+
icon={<LuImage className="h-5 w-5" />}
5852
variant="outline"
5953
size="lg"
60-
onClick={handleClear}
54+
onClick={handleBrowse}
6155
/>
56+
</Tooltip>
57+
{settings.backdropImage && (
58+
<Tooltip content="Clear image">
59+
<IconButton
60+
icon={<LuX className="h-5 w-5" />}
61+
variant="outline"
62+
size="lg"
63+
onClick={handleClear}
64+
/>
65+
</Tooltip>
6266
)}
6367
</div>
6468
<p className="text-sm text-surface-500">

‎src/modules/settings/components/LeaguePathSection.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { open } from "@tauri-apps/plugin-dialog";
22
import { useEffect, useState } from "react";
33
import { LuCircleAlert, LuCircleCheck, LuFolderOpen, LuLoader } from "react-icons/lu";
44

5-
import { Button, Field, IconButton, SectionCard } from "@/components";
5+
import { Button, Field, IconButton, SectionCard, Tooltip } from "@/components";
66
import { api, type Settings } from "@/lib/tauri";
77
import { unwrapForQuery } from "@/utils/query";
88

@@ -81,12 +81,14 @@ export function LeaguePathSection({ settings, onSave }: SettingsSectionProps) {
8181
</div>
8282
)}
8383
</div>
84-
<IconButton
85-
icon={<LuFolderOpen className="h-5 w-5" />}
86-
variant="outline"
87-
size="lg"
88-
onClick={handleBrowse}
89-
/>
84+
<Tooltip content="Browse">
85+
<IconButton
86+
icon={<LuFolderOpen className="h-5 w-5" />}
87+
variant="outline"
88+
size="lg"
89+
onClick={handleBrowse}
90+
/>
91+
</Tooltip>
9092
</div>
9193
<Button
9294
variant="transparent"

‎src/modules/settings/components/ModStorageSection.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { open } from "@tauri-apps/plugin-dialog";
22
import { LuFolderOpen } from "react-icons/lu";
33

4-
import { Field, IconButton, SectionCard } from "@/components";
4+
import { Field, IconButton, SectionCard, Tooltip } from "@/components";
55
import type { Settings } from "@/lib/tauri";
66

77
interface ModStorageSectionProps {
@@ -37,12 +37,14 @@ export function ModStorageSection({ settings, onSave }: ModStorageSectionProps)
3737
placeholder="Default (app data directory)"
3838
className="flex-1"
3939
/>
40-
<IconButton
41-
icon={<LuFolderOpen className="h-5 w-5" />}
42-
variant="outline"
43-
size="lg"
44-
onClick={handleBrowse}
45-
/>
40+
<Tooltip content="Browse">
41+
<IconButton
42+
icon={<LuFolderOpen className="h-5 w-5" />}
43+
variant="outline"
44+
size="lg"
45+
onClick={handleBrowse}
46+
/>
47+
</Tooltip>
4648
</div>
4749
<p className="text-sm text-surface-400">
4850
Choose where your installed mods will be stored. Leave empty to use the default location.

‎src/modules/settings/components/WorkshopSection.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { open } from "@tauri-apps/plugin-dialog";
22
import { LuFolderOpen } from "react-icons/lu";
33

4-
import { Field, IconButton, SectionCard } from "@/components";
4+
import { Field, IconButton, SectionCard, Tooltip } from "@/components";
55
import type { Settings } from "@/lib/tauri";
66

77
interface WorkshopSectionProps {
@@ -37,12 +37,14 @@ export function WorkshopSection({ settings, onSave }: WorkshopSectionProps) {
3737
placeholder="Not configured"
3838
className="flex-1"
3939
/>
40-
<IconButton
41-
icon={<LuFolderOpen className="h-5 w-5" />}
42-
variant="outline"
43-
size="lg"
44-
onClick={handleBrowse}
45-
/>
40+
<Tooltip content="Browse">
41+
<IconButton
42+
icon={<LuFolderOpen className="h-5 w-5" />}
43+
variant="outline"
44+
size="lg"
45+
onClick={handleBrowse}
46+
/>
47+
</Tooltip>
4648
</div>
4749
<p className="text-sm text-surface-400">
4850
Choose where your mod projects will be stored for the Creator Workshop. This directory

‎src/modules/shell/components/DevConsole.tsx‎

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { useEffect, useRef } from "react";
22
import { LuTerminal, LuTrash2, LuX } from "react-icons/lu";
33
import { twMerge } from "tailwind-merge";
44

5-
import { IconButton } from "@/components";
5+
import { IconButton, Tooltip } from "@/components";
66
import { isLevelVisible, type LogEntry, useDevConsoleStore } from "@/stores/devConsole";
77

88
const levelColors: Record<string, string> = {
@@ -105,22 +105,26 @@ export function DevConsole() {
105105

106106
<span className="ml-auto text-xs text-surface-500">{filteredEntries.length} entries</span>
107107

108-
<IconButton
109-
icon={<LuTrash2 className="h-3.5 w-3.5" />}
110-
variant="ghost"
111-
size="xs"
112-
onClick={clear}
113-
aria-label="Clear console"
114-
className="text-surface-400 hover:text-surface-200"
115-
/>
116-
<IconButton
117-
icon={<LuX className="h-3.5 w-3.5" />}
118-
variant="ghost"
119-
size="xs"
120-
onClick={toggle}
121-
aria-label="Close console"
122-
className="text-surface-400 hover:text-surface-200"
123-
/>
108+
<Tooltip content="Clear console">
109+
<IconButton
110+
icon={<LuTrash2 className="h-3.5 w-3.5" />}
111+
variant="ghost"
112+
size="xs"
113+
onClick={clear}
114+
aria-label="Clear console"
115+
className="text-surface-400 hover:text-surface-200"
116+
/>
117+
</Tooltip>
118+
<Tooltip content="Close console">
119+
<IconButton
120+
icon={<LuX className="h-3.5 w-3.5" />}
121+
variant="ghost"
122+
size="xs"
123+
onClick={toggle}
124+
aria-label="Close console"
125+
className="text-surface-400 hover:text-surface-200"
126+
/>
127+
</Tooltip>
124128
</div>
125129

126130
{/* Log entries */}

0 commit comments

Comments
 (0)