shadowdaoandClaude Opus 4.8
2a8a26687b
- Force font-size:16px !important on Styles-sheet/topbar/Sitesmith inputs inside the mobile media query so inline 12px/14px styles stop triggering iOS zoom-on-focus. - Lift sheet-open + Templates/Head Code modal-open state out of private useState into a shared MobileChromeContext (EditorShell), so Phase B can open/close sheets from outside MobilePanelBar. - Add an explicit z-index layer scale, portal TemplateModal to document.body (was trapped under the tab bar inside .topbar's stacking context), align Sitesmith to the same --z-modal layer, and make opening a sheet close any open modal. Also fix modal backdrops swallowing tab bar taps (mirrors the sheet backdrop's existing tab-bar cutout). - Drop BottomSheet's incorrect aria-modal; mobile-aware AssetsPanel empty state copy. - Tests: useIsMobile (matchMedia mock incl. legacy fallback + cleanup), MobileChromeContext invariants (one sheet open, sheet closes modals), MobilePanelBar wiring. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
27 lines
1.3 KiB
TypeScript
27 lines
1.3 KiB
TypeScript
import React, { useState, KeyboardEvent } from 'react';
|
|
|
|
interface Props { disabled?: boolean; placeholder?: string; onSend: (text: string) => void; }
|
|
|
|
export const ChatInput: React.FC<Props> = ({ disabled, placeholder, onSend }) => {
|
|
const [v, setV] = useState('');
|
|
const fire = () => { const t = v.trim(); if (!t || disabled) return; onSend(t); setV(''); };
|
|
const onKey = (e: KeyboardEvent<HTMLTextAreaElement>) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); fire(); } };
|
|
return (
|
|
<div style={{ display: 'flex', gap: 8, padding: '8px 0' }}>
|
|
<textarea value={v} onChange={(e) => setV(e.target.value)} onKeyDown={onKey} rows={2} disabled={disabled}
|
|
placeholder={placeholder || 'Describe what you want...'}
|
|
className="sitesmith-textarea"
|
|
style={{
|
|
flex: 1, background: disabled ? '#1f1f24' : '#0f0f17', color: '#e5e7eb',
|
|
border: '1px solid #3f3f46', borderRadius: 6, padding: 10, fontSize: 14, resize: 'none',
|
|
}} />
|
|
<button onClick={fire} disabled={disabled || v.trim() === ''}
|
|
style={{
|
|
background: disabled ? '#27272a' : '#7c3aed', color: '#fff',
|
|
border: 'none', padding: '0 16px', borderRadius: 6,
|
|
cursor: disabled ? 'not-allowed' : 'pointer', fontWeight: 500,
|
|
}}>→</button>
|
|
</div>
|
|
);
|
|
};
|