-
+
+
+
-
+
-
-
-
+
@@ -660,22 +752,37 @@ export default function App() {
);
}
-function SidebarNavLink({ closeMobile, item, t }: SidebarNavLinkProps) {
+function SidebarNavLink({
+ closeMobile,
+ collapsed,
+ item,
+ tooltipWarmRef,
+ t,
+}: SidebarNavLinkProps) {
const { path, label, labelKey, icon: Icon } = item;
+ const liRef = useRef(null);
+ const [hovered, setHovered] = useState(false);
const navLabel = labelKey
? ((t.app.nav as Record)[labelKey] ?? label)
: label;
return (
-
+ setHovered(true) : undefined}
+ onMouseLeave={collapsed ? () => setHovered(false) : undefined}
+ >
setHovered(true) : undefined}
+ onBlur={collapsed ? () => setHovered(false) : undefined}
className={({ isActive }) =>
cn(
- "group relative flex items-center gap-3",
+ "group/nav relative flex items-center gap-3",
"px-5 py-2.5",
"font-mondwest text-display uppercase text-sm tracking-[0.12em]",
"whitespace-nowrap transition-colors cursor-pointer",
@@ -692,11 +799,19 @@ function SidebarNavLink({ closeMobile, item, t }: SidebarNavLinkProps) {
{({ isActive }) => (
<>
- {navLabel}
+
+
+ {navLabel}
+
{isActive && (
@@ -709,11 +824,20 @@ function SidebarNavLink({ closeMobile, item, t }: SidebarNavLinkProps) {
)}
+
+ {collapsed && hovered && liRef.current && (
+
+ )}
);
}
-function SidebarSystemActions({ onNavigate }: { onNavigate: () => void }) {
+function SidebarSystemActions({
+ collapsed,
+ onNavigate,
+ status,
+ tooltipWarmRef,
+}: SidebarSystemActionsProps) {
const { t } = useI18n();
const navigate = useNavigate();
const { activeAction, isBusy, isRunning, pendingAction, runAction } =
@@ -755,75 +879,248 @@ function SidebarSystemActions({ onNavigate }: { onNavigate: () => void }) {
className={cn(
"px-5 pt-0.5 pb-0.5",
"font-mondwest text-display text-xs tracking-[0.12em] text-text-tertiary",
+ collapsed && "lg:hidden",
)}
>
{t.app.system}
-
+
+
+
+
+
- {items.map(({ action, icon: Icon, label, runningLabel, spin }) => {
- const isPending = pendingAction === action;
- const isActionRunning =
- activeAction === action && isRunning && !isPending;
- const busy = isPending || isActionRunning;
- const displayLabel = isActionRunning ? runningLabel : label;
- const disabled = isBusy && !busy;
-
- return (
- -
- handleClick(action)}
- disabled={disabled}
- aria-busy={busy}
- active={busy}
- className={cn(
- "gap-3 px-5 py-1.5 whitespace-nowrap",
- "font-mondwest text-display text-xs tracking-[0.1em]",
- "transition-colors",
- busy
- ? "text-midground"
- : "text-text-secondary hover:text-midground",
- "disabled:text-text-disabled",
- )}
- >
- {isPending ? (
-
- ) : isActionRunning && spin ? (
-
- ) : (
-
- )}
-
- {displayLabel}
-
-
-
- {busy && (
-
- )}
-
-
- );
- })}
+ {items.map((item) => (
+ handleClick(item.action)}
+ />
+ ))}
);
}
+function SystemActionButton({
+ collapsed,
+ disabled,
+ isPending,
+ isRunning: isActionRunning,
+ item,
+ onClick,
+ tooltipWarmRef,
+}: SystemActionButtonProps) {
+ const { icon: Icon, label, runningLabel, spin } = item;
+ const liRef = useRef
(null);
+ const [hovered, setHovered] = useState(false);
+ const busy = isPending || isActionRunning;
+ const displayLabel = isActionRunning ? runningLabel : label;
+
+ return (
+ setHovered(true) : undefined}
+ onMouseLeave={collapsed ? () => setHovered(false) : undefined}
+ >
+
+
+ {collapsed && hovered && liRef.current && (
+
+ )}
+
+ );
+}
+
+function SidebarIconWithTooltip({
+ children,
+ collapsed,
+ label,
+ tooltipWarmRef,
+}: SidebarIconWithTooltipProps) {
+ const ref = useRef(null);
+ const [hovered, setHovered] = useState(false);
+
+ return (
+ setHovered(true) : undefined}
+ onMouseLeave={collapsed ? () => setHovered(false) : undefined}
+ >
+ {children}
+
+ {collapsed && (
+
+ )}
+
+ {collapsed && hovered && ref.current && (
+
+ )}
+
+ );
+}
+
+function GatewayDot({ collapsed, status, tooltipWarmRef }: GatewayDotProps) {
+ const { t } = useI18n();
+ const ref = useRef(null);
+ const [hovered, setHovered] = useState(false);
+
+ const toneToColor: Record = {
+ "text-success": "bg-success",
+ "text-warning": "bg-warning",
+ "text-destructive": "bg-destructive",
+ "text-muted-foreground": "bg-muted-foreground",
+ };
+
+ let color: string;
+ let label: string;
+
+ if (!status) {
+ color = "bg-midground/20";
+ label = t.status.gateway;
+ } else {
+ const gw = gatewayLine(status, t);
+ color = toneToColor[gw.tone] ?? "bg-muted-foreground";
+ label = `${t.status.gateway} ${gw.label}`;
+ }
+
+ return (
+ setHovered(true) : undefined}
+ onMouseLeave={collapsed ? () => setHovered(false) : undefined}
+ onFocus={collapsed ? () => setHovered(true) : undefined}
+ onBlur={collapsed ? () => setHovered(false) : undefined}
+ >
+
+
+ {hovered && ref.current && (
+
+ )}
+
+ );
+}
+
+function SidebarTooltip({ anchor, label, warmRef }: SidebarTooltipProps) {
+ const rect = anchor.getBoundingClientRect();
+ const sidebar = document.getElementById("app-sidebar");
+ const sidebarRight = sidebar?.getBoundingClientRect().right ?? rect.right;
+
+ const isWarm = warmRef ? Date.now() - warmRef.current < 300 : false;
+
+ useEffect(() => {
+ if (warmRef) warmRef.current = Date.now();
+ return () => {
+ if (warmRef) warmRef.current = Date.now();
+ };
+ }, [warmRef]);
+
+ return createPortal(
+
+ {label}
+ ,
+ document.body,
+ );
+}
+
+type TooltipWarmRef = React.RefObject;
+
+interface GatewayDotProps {
+ collapsed: boolean;
+ status: StatusResponse | null;
+ tooltipWarmRef: TooltipWarmRef;
+}
+
interface NavItem {
icon: ComponentType<{ className?: string }>;
label: string;
@@ -831,10 +1128,42 @@ interface NavItem {
path: string;
}
+interface SidebarIconWithTooltipProps {
+ children: ReactNode;
+ collapsed: boolean;
+ label: string;
+ tooltipWarmRef: TooltipWarmRef;
+}
+
interface SidebarNavLinkProps {
closeMobile: () => void;
+ collapsed: boolean;
item: NavItem;
t: Translations;
+ tooltipWarmRef: TooltipWarmRef;
+}
+
+interface SidebarSystemActionsProps {
+ collapsed: boolean;
+ onNavigate: () => void;
+ status: StatusResponse | null;
+ tooltipWarmRef: TooltipWarmRef;
+}
+
+interface SidebarTooltipProps {
+ anchor: HTMLElement;
+ label: string;
+ warmRef?: TooltipWarmRef;
+}
+
+interface SystemActionButtonProps {
+ collapsed: boolean;
+ disabled: boolean;
+ isPending: boolean;
+ isRunning: boolean;
+ item: SystemActionItem;
+ onClick: () => void;
+ tooltipWarmRef: TooltipWarmRef;
}
interface SystemActionItem {
diff --git a/web/src/components/LanguageSwitcher.tsx b/web/src/components/LanguageSwitcher.tsx
index 9f790026550..9dd160822ea 100644
--- a/web/src/components/LanguageSwitcher.tsx
+++ b/web/src/components/LanguageSwitcher.tsx
@@ -1,4 +1,6 @@
import { useState, useRef, useEffect } from "react";
+import { createPortal } from "react-dom";
+import { Check } from "lucide-react";
import { Button } from "@nous-research/ui/ui/components/button";
import { BottomPickSheet } from "@/components/BottomPickSheet";
import { Typography } from "@/components/NouiTypography";
@@ -25,10 +27,11 @@ import { cn } from "@/lib/utils";
* viewport / overflow ancestors. Below the `sm` breakpoint, `dropUp` uses a
* bottom sheet portaled to `document.body` instead of an anchored dropdown.
*/
-export function LanguageSwitcher({ dropUp = false }: LanguageSwitcherProps) {
+export function LanguageSwitcher({ collapsed = false, dropUp = false }: LanguageSwitcherProps) {
const { locale, setLocale, t } = useI18n();
const [open, setOpen] = useState(false);
const containerRef = useRef(null);
+ const dropdownRef = useRef(null);
const narrowViewport = useBelowBreakpoint(640);
const useMobileSheet = Boolean(dropUp && narrowViewport);
@@ -41,15 +44,14 @@ export function LanguageSwitcher({ dropUp = false }: LanguageSwitcherProps) {
return () => document.removeEventListener("keydown", onKey);
}, [open]);
- // Outside-click closing only for anchored dropdown — sheet uses backdrop + portal.
useEffect(() => {
if (!open || useMobileSheet) return;
function onPointerDown(e: PointerEvent) {
- if (!containerRef.current) return;
- if (!containerRef.current.contains(e.target as Node)) {
- setOpen(false);
- }
+ const target = e.target as Node;
+ if (containerRef.current?.contains(target)) return;
+ if (dropdownRef.current?.contains(target)) return;
+ setOpen(false);
}
document.addEventListener("pointerdown", onPointerDown);
@@ -69,7 +71,10 @@ export function LanguageSwitcher({ dropUp = false }: LanguageSwitcherProps) {
aria-label={t.language.switchTo}
aria-haspopup="listbox"
aria-expanded={open}
- className="px-2 py-1 normal-case tracking-normal font-normal text-xs text-text-secondary hover:text-foreground"
+ className={cn(
+ "px-2 py-1 normal-case tracking-normal font-normal text-xs text-text-secondary hover:text-foreground",
+ collapsed && "hover:bg-transparent",
+ )}
>
)}
- {open && !useMobileSheet && (
-
-
-
- )}
+ {open && !useMobileSheet && (() => {
+ const rect = containerRef.current?.getBoundingClientRect();
+ const dropdown = (
+
+
+
+ );
+ return dropUp ? createPortal(dropdown, document.body) : dropdown;
+ })()}
);
}
@@ -134,10 +149,12 @@ function LanguageSwitcherOptions({
return (
);
})}
@@ -164,5 +181,6 @@ interface LanguageSwitcherOptionsProps {
}
interface LanguageSwitcherProps {
+ collapsed?: boolean;
dropUp?: boolean;
}
diff --git a/web/src/components/SidebarFooter.tsx b/web/src/components/SidebarFooter.tsx
index 70ab23d25a8..71a4b43e05b 100644
--- a/web/src/components/SidebarFooter.tsx
+++ b/web/src/components/SidebarFooter.tsx
@@ -1,10 +1,9 @@
import { Typography } from "@/components/NouiTypography";
-import { useSidebarStatus } from "@/hooks/useSidebarStatus";
+import type { StatusResponse } from "@/lib/api";
import { cn } from "@/lib/utils";
import { useI18n } from "@/i18n";
-export function SidebarFooter() {
- const status = useSidebarStatus();
+export function SidebarFooter({ status }: SidebarFooterProps) {
const { t } = useI18n();
return (
@@ -37,3 +36,7 @@ export function SidebarFooter() {