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:
@@ -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 = [
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user