fix(files): unify context menu trigger on mobile and desktop (#396)

* refactor: use explicit menu button for file row context menu

* fix: ensure model variants are computed from current source only
This commit is contained in:
gsxdsm
2026-02-12 09:52:13 +02:00
committed by GitHub
parent 82a2da47bb
commit b9d2142b1e
2 changed files with 21 additions and 29 deletions
@@ -522,7 +522,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({
// currentProviderId/currentModelId; include providers to avoid stale variants. // currentProviderId/currentModelId; include providers to avoid stale variants.
const availableVariants = React.useMemo(() => { const availableVariants = React.useMemo(() => {
return getCurrentModelVariants(); return getCurrentModelVariants();
}, [getCurrentModelVariants, currentProviderId, currentModelId, providers]); }, [getCurrentModelVariants]);
const hasVariants = availableVariants.length > 0; const hasVariants = availableVariants.length > 0;
const costRows = [ const costRows = [
+20 -28
View File
@@ -56,7 +56,6 @@ import {
import { useDebouncedValue } from '@/hooks/useDebouncedValue'; import { useDebouncedValue } from '@/hooks/useDebouncedValue';
import { useFileSearchStore } from '@/stores/useFileSearchStore'; import { useFileSearchStore } from '@/stores/useFileSearchStore';
import { useDeviceInfo } from '@/lib/device'; import { useDeviceInfo } from '@/lib/device';
import { useLongPress } from '@/hooks/useLongPress';
import { cn, getModifierLabel, hasModifier } from '@/lib/utils'; import { cn, getModifierLabel, hasModifier } from '@/lib/utils';
import { getLanguageFromExtension, getImageMimeType, isImageFile } from '@/lib/toolHelpers'; import { getLanguageFromExtension, getImageMimeType, isImageFile } from '@/lib/toolHelpers';
import { useRuntimeAPIs } from '@/hooks/useRuntimeAPIs'; import { useRuntimeAPIs } from '@/hooks/useRuntimeAPIs';
@@ -427,16 +426,10 @@ const FileRow: React.FC<FileRowProps> = ({
} }
}, [isDir, node, onSelect, onToggle]); }, [isDir, node, onSelect, onToggle]);
const longPressHandlers = useLongPress({ const handleMenuButtonClick = React.useCallback((event: React.MouseEvent) => {
onLongPress: handleContextMenu, event.stopPropagation();
onTap: handleInteraction, setContextMenuPath(node.path);
enableHaptic: true, }, [node.path, setContextMenuPath]);
});
const interactionProps = isMobile ? longPressHandlers : {
onClick: handleInteraction,
onContextMenu: handleContextMenu,
};
return ( return (
<div <div
@@ -445,7 +438,8 @@ const FileRow: React.FC<FileRowProps> = ({
> >
<button <button
type="button" type="button"
{...interactionProps} onClick={handleInteraction}
onContextMenu={!isMobile ? handleContextMenu : undefined}
className={cn( className={cn(
'flex w-full items-center gap-1.5 rounded-md px-2 py-1 text-left text-foreground transition-colors pr-8 select-none', 'flex w-full items-center gap-1.5 rounded-md px-2 py-1 text-left text-foreground transition-colors pr-8 select-none',
isActive ? 'bg-interactive-selection/70' : 'hover:bg-interactive-hover/40' isActive ? 'bg-interactive-selection/70' : 'hover:bg-interactive-hover/40'
@@ -478,27 +472,25 @@ const FileRow: React.FC<FileRowProps> = ({
</button> </button>
{(canRename || canCreateFile || canCreateFolder || canDelete) && ( {(canRename || canCreateFile || canCreateFolder || canDelete) && (
<div className={cn( <div className={cn(
"absolute right-1 top-1/2 -translate-y-1/2 opacity-0 focus-within:opacity-100", "absolute right-1 top-1/2 -translate-y-1/2",
!isMobile && "group-hover:opacity-100", !isMobile && "opacity-0 focus-within:opacity-100 group-hover:opacity-100",
(isMobile && contextMenuPath === node.path) && "opacity-100" isMobile && "opacity-100"
)}> )}>
<DropdownMenu <DropdownMenu
open={contextMenuPath === node.path} open={contextMenuPath === node.path}
onOpenChange={(open) => setContextMenuPath(open ? node.path : null)} onOpenChange={(open) => setContextMenuPath(open ? node.path : null)}
> >
{!isMobile && ( <DropdownMenuTrigger asChild>
<DropdownMenuTrigger asChild> <Button
<Button variant="ghost" size="icon" className="h-6 w-6"> variant="ghost"
<RiMore2Fill className="h-4 w-4" /> size="icon"
</Button> className="h-6 w-6"
</DropdownMenuTrigger> onClick={handleMenuButtonClick}
)} >
{isMobile && ( <RiMore2Fill className="h-4 w-4" />
<DropdownMenuTrigger asChild> </Button>
<span className="hidden" /> </DropdownMenuTrigger>
</DropdownMenuTrigger> <DropdownMenuContent align="end" side={isMobile ? "bottom" : "bottom"} onCloseAutoFocus={() => setContextMenuPath(null)}>
)}
<DropdownMenuContent align="end" onCloseAutoFocus={() => setContextMenuPath(null)}>
{canRename && ( {canRename && (
<DropdownMenuItem onClick={(e) => { e.stopPropagation(); onOpenDialog('rename', node); }}> <DropdownMenuItem onClick={(e) => { e.stopPropagation(); onOpenDialog('rename', node); }}>
<RiEditLine className="mr-2 h-4 w-4" /> Rename <RiEditLine className="mr-2 h-4 w-4" /> Rename