Bohdan Triapitsyn
ac93a52e21
* fix: open mobile model/agent panels on tablet-width Capacitor shells and keep composer taps from dismissing the keyboard * feat: add iPadOS-style split layout to the Capacitor app - classify the Capacitor shell as mobile in device detection so shared surfaces (draft starters, panels) stop falling into tablet branches - add isIPadApp() and useOrientation() helpers - iPad: persistent full-height sessions sidebar (mobile sessions surface inline), Changes/Files in a right sidebar with header shortcut toggles - animate sidebar open/close like the desktop sidebars and add finger-sized drag-resize with persisted widths - anchor the overflow menu and the usage/metadata popover next to their header buttons regardless of open sidebars * fix: re-anchor metadata popover on layout shifts and untangle sidebar toggle updates - recompute the iPad metadata popover anchor via a ResizeObserver on its wrapper so sidebar toggles/resizes while it is open cannot leave it misplaced - move the portrait right-panel close out of the setIpadSidebarOpen updater into plain sequential state updates
54 lines
2.3 KiB
TypeScript
54 lines
2.3 KiB
TypeScript
import React from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
import { useConfigStore } from '@/stores/useConfigStore';
|
|
import { getModelDisplayName } from './mobileControlsUtils';
|
|
import { ProviderLogo } from '@/components/ui/ProviderLogo';
|
|
import { useI18n } from '@/lib/i18n';
|
|
|
|
interface MobileModelButtonProps {
|
|
onOpenModel: () => void;
|
|
className?: string;
|
|
}
|
|
|
|
export const MobileModelButton: React.FC<MobileModelButtonProps> = ({ onOpenModel, className }) => {
|
|
const { t } = useI18n();
|
|
const currentModelId = useConfigStore((state) => state.currentModelId);
|
|
const currentProviderId = useConfigStore((state) => state.currentProviderId);
|
|
const getCurrentProvider = useConfigStore((state) => state.getCurrentProvider);
|
|
const currentProvider = getCurrentProvider();
|
|
const modelLabel = getModelDisplayName(currentProvider, currentModelId, t('chat.modelControls.selectModel'));
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={onOpenModel}
|
|
// Same guard as PermissionAutoAcceptButton/MobileAgentButton: block
|
|
// the focus transfer so the tap doesn't dismiss the keyboard. With
|
|
// interactive-widget=resizes-content (Android), the keyboard-close
|
|
// relayout moves this button mid-tap and the click never lands.
|
|
onMouseDown={(event) => event.preventDefault()}
|
|
onPointerDownCapture={(event) => {
|
|
if (event.pointerType === 'touch') {
|
|
event.preventDefault();
|
|
}
|
|
}}
|
|
className={cn(
|
|
'inline-flex min-w-0 items-stretch',
|
|
'rounded-lg',
|
|
'typography-micro font-medium text-foreground/80',
|
|
'focus:outline-none hover:bg-[var(--interactive-hover)]',
|
|
className
|
|
)}
|
|
style={{ height: '26px', maxHeight: '26px', minHeight: '26px' }}
|
|
title={modelLabel}
|
|
>
|
|
<span className="flex h-full w-full min-w-0 items-center gap-1">
|
|
{currentProviderId ? (
|
|
<ProviderLogo providerId={currentProviderId} className="size-4 flex-shrink-0" />
|
|
) : null}
|
|
<span className="truncate">{modelLabel}</span>
|
|
</span>
|
|
</button>
|
|
);
|
|
};
|