👁️ fix: Return Focus on My Files Modal Close (#11032)

* fix: focus returns to manage files button on modal close

* refactor: remove atoms and re-use components instead

* refactor: FilesView to MyFilesModal

* chore: import styling

* chore: delete file that was meant to be renamed

* feat: add trigger ref for settings button as well
This commit is contained in:
Dustin Healy 2025-12-18 10:36:19 -08:00 committed by GitHub
parent 1f695e0cdc
commit 98294755ee
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 33 additions and 14 deletions

View file

@ -1,14 +1,12 @@
import { useState, memo } from 'react';
import { useRecoilState } from 'recoil';
import { useState, memo, useRef } from 'react';
import * as Select from '@ariakit/react/select';
import { FileText, LogOut } from 'lucide-react';
import { LinkIcon, GearIcon, DropdownMenuSeparator, Avatar } from '@librechat/client';
import { MyFilesModal } from '~/components/Chat/Input/Files/MyFilesModal';
import { useGetStartupConfig, useGetUserBalance } from '~/data-provider';
import FilesView from '~/components/Chat/Input/Files/FilesView';
import { useAuthContext } from '~/hooks/AuthContext';
import { useLocalize } from '~/hooks';
import Settings from './Settings';
import store from '~/store';
function AccountSettings() {
const localize = useLocalize();
@ -18,11 +16,13 @@ function AccountSettings() {
enabled: !!isAuthenticated && startupConfig?.balance?.enabled,
});
const [showSettings, setShowSettings] = useState(false);
const [showFiles, setShowFiles] = useRecoilState(store.showFiles);
const [showFiles, setShowFiles] = useState(false);
const accountSettingsButtonRef = useRef<HTMLButtonElement>(null);
return (
<Select.SelectProvider>
<Select.Select
ref={accountSettingsButtonRef}
aria-label={localize('com_nav_account_settings')}
data-testid="nav-user"
className="mt-text-sm flex h-auto w-full items-center gap-2 rounded-xl p-2 text-sm transition-all duration-200 ease-in-out hover:bg-surface-hover aria-[expanded=true]:bg-surface-hover"
@ -96,7 +96,13 @@ function AccountSettings() {
{localize('com_nav_log_out')}
</Select.SelectItem>
</Select.SelectPopover>
{showFiles && <FilesView open={showFiles} onOpenChange={setShowFiles} />}
{showFiles && (
<MyFilesModal
open={showFiles}
onOpenChange={setShowFiles}
triggerRef={accountSettingsButtonRef}
/>
)}
{showSettings && <Settings open={showSettings} onOpenChange={setShowSettings} />}
</Select.SelectProvider>
);