31862f3a40
Performance and polish improvements across dashboard components: Transition optimizations (reduces reflow/repaint overhead): - OptionButton: transition-all → transition-[transform,border-color, background-color,box-shadow] - QuestionBlock: Add transition-colors to textarea, transition-all → transition-[transform,filter] on send button - SimpleInput: Same pattern as QuestionBlock - Sidebar: transition-all → transition-colors for project buttons Animation additions: - App: Add animate-fade-in-up to loading and error state containers - MessageBubble: Make fade-in-up animation conditional on non-compact mode to avoid animation spam in card preview Using specific transition properties instead of transition-all tells the browser exactly which properties to watch, avoiding unnecessary style recalculation on unrelated property changes. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
50 lines
1.7 KiB
JavaScript
50 lines
1.7 KiB
JavaScript
import { html, useState } from '../lib/preact.js';
|
|
import { getStatusMeta } from '../utils/status.js';
|
|
|
|
export function SimpleInput({ sessionId, status, onRespond }) {
|
|
const [text, setText] = useState('');
|
|
const [focused, setFocused] = useState(false);
|
|
const meta = getStatusMeta(status);
|
|
|
|
const handleSubmit = (e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
if (text.trim()) {
|
|
onRespond(sessionId, text.trim(), true, 0);
|
|
setText('');
|
|
}
|
|
};
|
|
|
|
return html`
|
|
<form onSubmit=${handleSubmit} class="flex items-end gap-2.5" onClick=${(e) => e.stopPropagation()}>
|
|
<textarea
|
|
value=${text}
|
|
onInput=${(e) => {
|
|
setText(e.target.value);
|
|
e.target.style.height = 'auto';
|
|
e.target.style.height = e.target.scrollHeight + 'px';
|
|
}}
|
|
onKeyDown=${(e) => {
|
|
if (e.key === 'Enter' && !e.shiftKey) {
|
|
e.preventDefault();
|
|
handleSubmit(e);
|
|
}
|
|
}}
|
|
onFocus=${() => setFocused(true)}
|
|
onBlur=${() => setFocused(false)}
|
|
placeholder="Send a message..."
|
|
rows="1"
|
|
class="flex-1 resize-none overflow-hidden rounded-xl border border-selection/75 bg-bg/70 px-3 py-2 text-sm text-fg transition-colors duration-150 placeholder:text-dim focus:outline-none"
|
|
style=${{ minHeight: '38px', maxHeight: '150px', borderColor: focused ? meta.borderColor : undefined }}
|
|
/>
|
|
<button
|
|
type="submit"
|
|
class="shrink-0 rounded-xl px-3 py-2 text-sm font-medium transition-[transform,filter] duration-150 hover:-translate-y-0.5 hover:brightness-110"
|
|
style=${{ backgroundColor: meta.borderColor, color: '#0a0f18' }}
|
|
>
|
|
Send
|
|
</button>
|
|
</form>
|
|
`;
|
|
}
|