bar graph fix
This commit is contained in:
parent
43318fb8cd
commit
8c3d749197
15 changed files with 973 additions and 401 deletions
|
|
@ -6,9 +6,11 @@ import { usePathname, useRouter } from "next/navigation";
|
|||
import {
|
||||
IconHome2, IconMoon, IconSun, IconChevronsLeft, IconChevronsRight,
|
||||
IconMenu2, IconX, IconCode, IconKey, IconLogout, IconUsers, IconChartLine,
|
||||
IconChevronDown, IconBolt, IconChartBar, IconChartCandle,
|
||||
IconChevronDown, IconBolt, IconChartBar, IconChartCandle, IconHelpCircle,
|
||||
} from "@tabler/icons-react";
|
||||
import { useSetTheme } from "@/stores/useThemeStore";
|
||||
import { useHelpMode, useToggleHelpMode } from "@/stores/helpModeStore";
|
||||
import HelpTooltip from "./HelpTooltip";
|
||||
import { useFocusedWindowState, requestViewChange } from "@/stores/windowStore";
|
||||
import { PANEL_SECTIONS, type PanelId } from "@/app/components/windows/types";
|
||||
import { SideNavWidgets } from "./SideNavWidgets";
|
||||
|
|
@ -51,7 +53,6 @@ function WindowNav({ collapsed, focusedPanelId }: { collapsed: boolean; focusedP
|
|||
if (collapsed) {
|
||||
return (
|
||||
<div className="flex flex-col gap-[2px] px-[8px] mt-1">
|
||||
{/* Dashboard icon */}
|
||||
<button
|
||||
onClick={() => requestViewChange("dashboard")}
|
||||
title="Dashboard"
|
||||
|
|
@ -64,7 +65,6 @@ function WindowNav({ collapsed, focusedPanelId }: { collapsed: boolean; focusedP
|
|||
>
|
||||
<IconHome2 size={15} strokeWidth={focusedPanelId === "dashboard" ? 2.5 : 2} className="shrink-0" />
|
||||
</button>
|
||||
{/* Section items */}
|
||||
{PANEL_SECTIONS.flatMap((s) =>
|
||||
s.items.map(({ panelId, label }) => {
|
||||
const Icon = ANALYTICS_ICONS[panelId];
|
||||
|
|
@ -92,39 +92,41 @@ function WindowNav({ collapsed, focusedPanelId }: { collapsed: boolean; focusedP
|
|||
|
||||
return (
|
||||
<div className="flex flex-col gap-[1px] px-[8px] mt-1">
|
||||
{/* Dashboard standalone */}
|
||||
<button
|
||||
onClick={() => requestViewChange("dashboard")}
|
||||
className={[
|
||||
"w-full flex items-center gap-[8px] px-[10px] py-[7px] text-[13px] rounded-[8px] transition-colors cursor-pointer font-medium",
|
||||
focusedPanelId === "dashboard"
|
||||
? "bg-blue/10 text-blue font-semibold"
|
||||
: "text-foreground-sec hover:bg-secondary/50 hover:text-foreground",
|
||||
].join(" ")}
|
||||
>
|
||||
<IconHome2 size={14} strokeWidth={focusedPanelId === "dashboard" ? 2.5 : 2} className="shrink-0" />
|
||||
Dashboard
|
||||
</button>
|
||||
<HelpTooltip text="Switch to the main dashboard showing live system stats and power usage." block>
|
||||
<button
|
||||
onClick={() => requestViewChange("dashboard")}
|
||||
className={[
|
||||
"w-full flex items-center gap-[8px] px-[10px] py-[7px] text-[13px] rounded-[8px] transition-colors cursor-pointer font-medium",
|
||||
focusedPanelId === "dashboard"
|
||||
? "bg-blue/10 text-blue font-semibold"
|
||||
: "text-foreground-sec hover:bg-secondary/50 hover:text-foreground",
|
||||
].join(" ")}
|
||||
>
|
||||
<IconHome2 size={14} strokeWidth={focusedPanelId === "dashboard" ? 2.5 : 2} className="shrink-0" />
|
||||
Dashboard
|
||||
</button>
|
||||
</HelpTooltip>
|
||||
|
||||
{/* Power Analytics section */}
|
||||
{PANEL_SECTIONS.map((section) => {
|
||||
const SectionIcon = SECTION_ICONS[section.id] ?? IconBolt;
|
||||
const isOpen = openSections.has(section.id);
|
||||
|
||||
return (
|
||||
<div key={section.id}>
|
||||
<button
|
||||
onClick={() => toggleSection(section.id)}
|
||||
className="w-full flex items-center gap-[8px] px-[10px] py-[5px] rounded-[8px] text-[11px] font-semibold text-foreground-sec hover:bg-secondary/40 hover:text-foreground transition-colors cursor-pointer select-none"
|
||||
>
|
||||
<SectionIcon size={13} className="shrink-0" />
|
||||
<span className="flex-1 text-left">{section.label}</span>
|
||||
<IconChevronDown
|
||||
size={11}
|
||||
className="shrink-0 transition-transform duration-200"
|
||||
style={{ transform: isOpen ? "rotate(0deg)" : "rotate(-90deg)" }}
|
||||
/>
|
||||
</button>
|
||||
<HelpTooltip text={`Expand or collapse the ${section.label} section.`} block>
|
||||
<button
|
||||
onClick={() => toggleSection(section.id)}
|
||||
className="w-full flex items-center gap-[8px] px-[10px] py-[5px] rounded-[8px] text-[11px] font-semibold text-foreground-sec hover:bg-secondary/40 hover:text-foreground transition-colors cursor-pointer select-none"
|
||||
>
|
||||
<SectionIcon size={13} className="shrink-0" />
|
||||
<span className="flex-1 text-left">{section.label}</span>
|
||||
<IconChevronDown
|
||||
size={11}
|
||||
className="shrink-0 transition-transform duration-200"
|
||||
style={{ transform: isOpen ? "rotate(0deg)" : "rotate(-90deg)" }}
|
||||
/>
|
||||
</button>
|
||||
</HelpTooltip>
|
||||
|
||||
{isOpen && (
|
||||
<div className="flex flex-col gap-[1px] pl-[6px]">
|
||||
|
|
@ -132,19 +134,20 @@ function WindowNav({ collapsed, focusedPanelId }: { collapsed: boolean; focusedP
|
|||
const Icon = ANALYTICS_ICONS[panelId];
|
||||
const active = focusedPanelId === panelId;
|
||||
return (
|
||||
<button
|
||||
key={panelId}
|
||||
onClick={() => requestViewChange(panelId)}
|
||||
className={[
|
||||
"w-full flex items-center gap-[8px] px-[10px] py-[6px] text-[12px] rounded-[8px] transition-colors cursor-pointer",
|
||||
active
|
||||
? "bg-blue/10 text-blue font-semibold"
|
||||
: "text-foreground-sec hover:bg-secondary/50 hover:text-foreground font-medium",
|
||||
].join(" ")}
|
||||
>
|
||||
<Icon size={13} strokeWidth={active ? 2.5 : 2} className="shrink-0" />
|
||||
{label}
|
||||
</button>
|
||||
<HelpTooltip key={panelId} text={`Open the ${label} analytics chart.`} block>
|
||||
<button
|
||||
onClick={() => requestViewChange(panelId)}
|
||||
className={[
|
||||
"w-full flex items-center gap-[8px] px-[10px] py-[6px] text-[12px] rounded-[8px] transition-colors cursor-pointer",
|
||||
active
|
||||
? "bg-blue/10 text-blue font-semibold"
|
||||
: "text-foreground-sec hover:bg-secondary/50 hover:text-foreground font-medium",
|
||||
].join(" ")}
|
||||
>
|
||||
<Icon size={13} strokeWidth={active ? 2.5 : 2} className="shrink-0" />
|
||||
{label}
|
||||
</button>
|
||||
</HelpTooltip>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
|
@ -162,6 +165,8 @@ const SideNav = ({ online, devConsoleOpen, onToggleDevConsole, isAuthed }: SideN
|
|||
const pathname = usePathname();
|
||||
const router = useRouter();
|
||||
const setTheme = useSetTheme();
|
||||
const helpMode = useHelpMode();
|
||||
const toggleHelp = useToggleHelpMode();
|
||||
const [collapsed, setCollapsed] = useState(false);
|
||||
const [sidebarWidth, setSidebarWidth] = useState(220);
|
||||
const [menuOpen, setMenuOpen] = useState(false);
|
||||
|
|
@ -282,51 +287,72 @@ const SideNav = ({ online, devConsoleOpen, onToggleDevConsole, isAuthed }: SideN
|
|||
{/* Dev console */}
|
||||
{auth && (
|
||||
<div className="px-[8px] shrink-0">
|
||||
<button onClick={onToggleDevConsole} title={collapsed ? "Dev Console" : undefined}
|
||||
className={"w-full flex items-center rounded-[8px] transition-colors cursor-pointer font-medium " +
|
||||
(collapsed ? "justify-center py-[7px]" : "gap-[10px] px-[10px] py-[7px] text-[13px] whitespace-nowrap ") +
|
||||
(devConsoleOpen ? "bg-blue/10 text-blue" : "text-foreground-sec hover:bg-secondary/50 hover:text-foreground")}>
|
||||
<IconCode size={16} className="shrink-0" />
|
||||
{!collapsed && "Dev Console"}
|
||||
</button>
|
||||
<HelpTooltip text="Open the dev console to inspect live API requests and send test requests." block hidden={collapsed}>
|
||||
<button onClick={onToggleDevConsole} title={collapsed ? "Dev Console" : undefined}
|
||||
className={"w-full flex items-center rounded-[8px] transition-colors cursor-pointer font-medium " +
|
||||
(collapsed ? "justify-center py-[7px]" : "gap-[10px] px-[10px] py-[7px] text-[13px] whitespace-nowrap ") +
|
||||
(devConsoleOpen ? "bg-blue/10 text-blue" : "text-foreground-sec hover:bg-secondary/50 hover:text-foreground")}>
|
||||
<IconCode size={16} className="shrink-0" />
|
||||
{!collapsed && "Dev Console"}
|
||||
</button>
|
||||
</HelpTooltip>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Logout */}
|
||||
{auth && (
|
||||
<div className="px-[8px] shrink-0">
|
||||
<button onClick={handleLogout} title={collapsed ? "Log out" : undefined}
|
||||
className={"w-full flex items-center rounded-[8px] transition-colors cursor-pointer font-medium text-red-400 hover:bg-red-500/10 " +
|
||||
(collapsed ? "justify-center py-[7px]" : "gap-[10px] px-[10px] py-[7px] text-[13px] whitespace-nowrap")}>
|
||||
<IconLogout size={16} className="shrink-0" />
|
||||
{!collapsed && "Log out"}
|
||||
</button>
|
||||
<HelpTooltip text="Sign out of your account and return to the login screen." block hidden={collapsed}>
|
||||
<button onClick={handleLogout} title={collapsed ? "Log out" : undefined}
|
||||
className={"w-full flex items-center rounded-[8px] transition-colors cursor-pointer font-medium text-red-400 hover:bg-red-500/10 " +
|
||||
(collapsed ? "justify-center py-[7px]" : "gap-[10px] px-[10px] py-[7px] text-[13px] whitespace-nowrap")}>
|
||||
<IconLogout size={16} className="shrink-0" />
|
||||
{!collapsed && "Log out"}
|
||||
</button>
|
||||
</HelpTooltip>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Theme toggle */}
|
||||
<div className="px-[8px] mt-[4px] shrink-0">
|
||||
<button onClick={setTheme} title={collapsed ? "Toggle theme" : undefined}
|
||||
className={"w-full flex items-center rounded-[8px] transition-colors cursor-pointer text-foreground-sec hover:bg-secondary/50 hover:text-foreground font-medium " +
|
||||
(collapsed ? "justify-center py-[7px]" : "gap-[10px] px-[10px] py-[7px] text-[13px] whitespace-nowrap")}>
|
||||
<IconMoon size={16} className="shrink-0 dark-theme:hidden" />
|
||||
<IconSun size={16} className="shrink-0 hidden dark-theme:block" />
|
||||
{!collapsed && <><span className="dark-theme:hidden">Dark mode</span><span className="hidden dark-theme:block">Light mode</span></>}
|
||||
</button>
|
||||
<HelpTooltip text="Switch between light and dark color scheme." block hidden={collapsed}>
|
||||
<button onClick={setTheme} title={collapsed ? "Toggle theme" : undefined}
|
||||
className={"w-full flex items-center rounded-[8px] transition-colors cursor-pointer text-foreground-sec hover:bg-secondary/50 hover:text-foreground font-medium " +
|
||||
(collapsed ? "justify-center py-[7px]" : "gap-[10px] px-[10px] py-[7px] text-[13px] whitespace-nowrap")}>
|
||||
<IconMoon size={16} className="shrink-0 dark-theme:hidden" />
|
||||
<IconSun size={16} className="shrink-0 hidden dark-theme:block" />
|
||||
{!collapsed && <><span className="dark-theme:hidden">Dark mode</span><span className="hidden dark-theme:block">Light mode</span></>}
|
||||
</button>
|
||||
</HelpTooltip>
|
||||
</div>
|
||||
|
||||
{/* Help mode toggle */}
|
||||
<div className="px-[8px] shrink-0">
|
||||
<HelpTooltip text="Toggle help mode — shows a ? badge next to every button explaining what it does." block hidden={collapsed}>
|
||||
<button onClick={toggleHelp} title={collapsed ? "Help mode" : undefined}
|
||||
className={"w-full flex items-center rounded-[8px] transition-colors cursor-pointer font-medium " +
|
||||
(collapsed ? "justify-center py-[7px]" : "gap-[10px] px-[10px] py-[7px] text-[13px] whitespace-nowrap ") +
|
||||
(helpMode ? "text-blue bg-blue/10" : "text-foreground-sec hover:bg-secondary/50 hover:text-foreground")}>
|
||||
<IconHelpCircle size={16} className="shrink-0" />
|
||||
{!collapsed && "Help mode"}
|
||||
</button>
|
||||
</HelpTooltip>
|
||||
</div>
|
||||
|
||||
{/* Divider + collapse */}
|
||||
<div className="mx-[8px] my-[8px] border-t border-secondary shrink-0" />
|
||||
<div className="px-[8px] shrink-0">
|
||||
<button onClick={() => setCollapsed((c) => !c)}
|
||||
title={collapsed ? "Expand sidebar" : "Collapse sidebar"}
|
||||
className={"w-full flex items-center rounded-[8px] transition-colors cursor-pointer text-foreground-sec hover:bg-secondary/50 hover:text-foreground font-medium " +
|
||||
(collapsed ? "justify-center py-[7px]" : "gap-[10px] px-[10px] py-[7px] text-[13px] whitespace-nowrap")}>
|
||||
{collapsed
|
||||
? <IconChevronsRight size={16} className="shrink-0" />
|
||||
: <IconChevronsLeft size={16} className="shrink-0" />}
|
||||
{!collapsed && "Collapse"}
|
||||
</button>
|
||||
<HelpTooltip text="Collapse the sidebar to icons only to give more space to the main content." block hidden={collapsed}>
|
||||
<button onClick={() => setCollapsed((c) => !c)}
|
||||
title={collapsed ? "Expand sidebar" : "Collapse sidebar"}
|
||||
className={"w-full flex items-center rounded-[8px] transition-colors cursor-pointer text-foreground-sec hover:bg-secondary/50 hover:text-foreground font-medium " +
|
||||
(collapsed ? "justify-center py-[7px]" : "gap-[10px] px-[10px] py-[7px] text-[13px] whitespace-nowrap")}>
|
||||
{collapsed
|
||||
? <IconChevronsRight size={16} className="shrink-0" />
|
||||
: <IconChevronsLeft size={16} className="shrink-0" />}
|
||||
{!collapsed && "Collapse"}
|
||||
</button>
|
||||
</HelpTooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -344,10 +370,12 @@ const SideNav = ({ online, devConsoleOpen, onToggleDevConsole, isAuthed }: SideN
|
|||
<Link href="/" onClick={() => setMenuOpen(false)}>
|
||||
<img src="/logo.svg" alt="logo" className="max-h-[22px]" />
|
||||
</Link>
|
||||
<button onClick={() => setMenuOpen((o) => !o)}
|
||||
className="ml-auto p-[7px] rounded-[8px] text-foreground-sec hover:bg-secondary/50 hover:text-foreground transition-colors cursor-pointer">
|
||||
{menuOpen ? <IconX size={18} /> : <IconMenu2 size={18} />}
|
||||
</button>
|
||||
<HelpTooltip text="Open or close the navigation menu.">
|
||||
<button onClick={() => setMenuOpen((o) => !o)}
|
||||
className="ml-auto p-[7px] rounded-[8px] text-foreground-sec hover:bg-secondary/50 hover:text-foreground transition-colors cursor-pointer">
|
||||
{menuOpen ? <IconX size={18} /> : <IconMenu2 size={18} />}
|
||||
</button>
|
||||
</HelpTooltip>
|
||||
</div>
|
||||
|
||||
{/* Mobile dropdown menu */}
|
||||
|
|
@ -383,13 +411,15 @@ const SideNav = ({ online, devConsoleOpen, onToggleDevConsole, isAuthed }: SideN
|
|||
Views
|
||||
</p>
|
||||
{/* Dashboard */}
|
||||
<button
|
||||
onClick={() => { requestViewChange("dashboard"); setMenuOpen(false); }}
|
||||
className={"w-full flex items-center gap-[10px] px-[10px] py-[7px] text-[13px] rounded-[8px] transition-colors cursor-pointer " +
|
||||
(focusedPanelId === "dashboard" ? "bg-blue/10 text-blue font-semibold" : "text-foreground-sec hover:bg-secondary/50 hover:text-foreground font-medium")}>
|
||||
<IconHome2 size={15} strokeWidth={focusedPanelId === "dashboard" ? 2.5 : 2} className="shrink-0" />
|
||||
Dashboard
|
||||
</button>
|
||||
<HelpTooltip text="Switch to the main dashboard showing live system stats and power usage." block>
|
||||
<button
|
||||
onClick={() => { requestViewChange("dashboard"); setMenuOpen(false); }}
|
||||
className={"w-full flex items-center gap-[10px] px-[10px] py-[7px] text-[13px] rounded-[8px] transition-colors cursor-pointer " +
|
||||
(focusedPanelId === "dashboard" ? "bg-blue/10 text-blue font-semibold" : "text-foreground-sec hover:bg-secondary/50 hover:text-foreground font-medium")}>
|
||||
<IconHome2 size={15} strokeWidth={focusedPanelId === "dashboard" ? 2.5 : 2} className="shrink-0" />
|
||||
Dashboard
|
||||
</button>
|
||||
</HelpTooltip>
|
||||
{/* Sections */}
|
||||
{PANEL_SECTIONS.map((section) => (
|
||||
<div key={section.id} className="mb-1 mt-2">
|
||||
|
|
@ -400,13 +430,15 @@ const SideNav = ({ online, devConsoleOpen, onToggleDevConsole, isAuthed }: SideN
|
|||
const Icon = ANALYTICS_ICONS[panelId];
|
||||
const active = focusedPanelId === panelId;
|
||||
return (
|
||||
<button key={panelId}
|
||||
onClick={() => { requestViewChange(panelId); setMenuOpen(false); }}
|
||||
className={"w-full flex items-center gap-[10px] px-[10px] py-[7px] text-[13px] rounded-[8px] transition-colors cursor-pointer " +
|
||||
(active ? "bg-blue/10 text-blue font-semibold" : "text-foreground-sec hover:bg-secondary/50 hover:text-foreground font-medium")}>
|
||||
<Icon size={15} strokeWidth={active ? 2.5 : 2} className="shrink-0" />
|
||||
{label}
|
||||
</button>
|
||||
<HelpTooltip key={panelId} text={`Open the ${label} analytics chart.`} block>
|
||||
<button
|
||||
onClick={() => { requestViewChange(panelId); setMenuOpen(false); }}
|
||||
className={"w-full flex items-center gap-[10px] px-[10px] py-[7px] text-[13px] rounded-[8px] transition-colors cursor-pointer " +
|
||||
(active ? "bg-blue/10 text-blue font-semibold" : "text-foreground-sec hover:bg-secondary/50 hover:text-foreground font-medium")}>
|
||||
<Icon size={15} strokeWidth={active ? 2.5 : 2} className="shrink-0" />
|
||||
{label}
|
||||
</button>
|
||||
</HelpTooltip>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
|
@ -418,27 +450,41 @@ const SideNav = ({ online, devConsoleOpen, onToggleDevConsole, isAuthed }: SideN
|
|||
<div className="mx-[8px] border-t border-secondary" />
|
||||
<div className="p-[8px] flex flex-col gap-[2px]">
|
||||
{auth && (
|
||||
<button onClick={() => { onToggleDevConsole(); setMenuOpen(false); }}
|
||||
className={"w-full flex items-center gap-[10px] px-[10px] py-[7px] text-[13px] rounded-[8px] transition-colors cursor-pointer " +
|
||||
(devConsoleOpen ? "bg-blue/10 text-blue font-medium" : "text-foreground-sec hover:bg-secondary/50 hover:text-foreground font-medium")}>
|
||||
<IconCode size={16} className="shrink-0" />
|
||||
Dev Console
|
||||
</button>
|
||||
<HelpTooltip text="Open the dev console to inspect live API requests and send test requests." block>
|
||||
<button onClick={() => { onToggleDevConsole(); setMenuOpen(false); }}
|
||||
className={"w-full flex items-center gap-[10px] px-[10px] py-[7px] text-[13px] rounded-[8px] transition-colors cursor-pointer " +
|
||||
(devConsoleOpen ? "bg-blue/10 text-blue font-medium" : "text-foreground-sec hover:bg-secondary/50 hover:text-foreground font-medium")}>
|
||||
<IconCode size={16} className="shrink-0" />
|
||||
Dev Console
|
||||
</button>
|
||||
</HelpTooltip>
|
||||
)}
|
||||
{auth && (
|
||||
<button onClick={handleLogout}
|
||||
className="w-full flex items-center gap-[10px] px-[10px] py-[7px] text-[13px] rounded-[8px] text-red-400 hover:bg-red-500/10 transition-colors cursor-pointer font-medium">
|
||||
<IconLogout size={16} className="shrink-0" />
|
||||
Log out
|
||||
</button>
|
||||
<HelpTooltip text="Sign out of your account and return to the login screen." block>
|
||||
<button onClick={handleLogout}
|
||||
className="w-full flex items-center gap-[10px] px-[10px] py-[7px] text-[13px] rounded-[8px] text-red-400 hover:bg-red-500/10 transition-colors cursor-pointer font-medium">
|
||||
<IconLogout size={16} className="shrink-0" />
|
||||
Log out
|
||||
</button>
|
||||
</HelpTooltip>
|
||||
)}
|
||||
<button onClick={setTheme}
|
||||
className="w-full flex items-center gap-[10px] px-[10px] py-[7px] text-[13px] rounded-[8px] text-foreground-sec hover:bg-secondary/50 hover:text-foreground transition-colors cursor-pointer font-medium">
|
||||
<IconMoon size={16} className="shrink-0 dark-theme:hidden" />
|
||||
<IconSun size={16} className="shrink-0 hidden dark-theme:block" />
|
||||
<span className="dark-theme:hidden">Dark mode</span>
|
||||
<span className="hidden dark-theme:block">Light mode</span>
|
||||
</button>
|
||||
<HelpTooltip text="Switch between light and dark color scheme." block>
|
||||
<button onClick={setTheme}
|
||||
className="w-full flex items-center gap-[10px] px-[10px] py-[7px] text-[13px] rounded-[8px] text-foreground-sec hover:bg-secondary/50 hover:text-foreground transition-colors cursor-pointer font-medium">
|
||||
<IconMoon size={16} className="shrink-0 dark-theme:hidden" />
|
||||
<IconSun size={16} className="shrink-0 hidden dark-theme:block" />
|
||||
<span className="dark-theme:hidden">Dark mode</span>
|
||||
<span className="hidden dark-theme:block">Light mode</span>
|
||||
</button>
|
||||
</HelpTooltip>
|
||||
<HelpTooltip text="Toggle help mode — shows a ? badge next to every button explaining what it does." block>
|
||||
<button onClick={() => { toggleHelp(); setMenuOpen(false); }}
|
||||
className={"w-full flex items-center gap-[10px] px-[10px] py-[7px] text-[13px] rounded-[8px] transition-colors cursor-pointer font-medium " +
|
||||
(helpMode ? "text-blue bg-blue/10" : "text-foreground-sec hover:bg-secondary/50 hover:text-foreground")}>
|
||||
<IconHelpCircle size={16} className="shrink-0" />
|
||||
Help mode
|
||||
</button>
|
||||
</HelpTooltip>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue