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>
19 lines
743 B
JavaScript
19 lines
743 B
JavaScript
import { html } from '../lib/preact.js';
|
|
|
|
export function OptionButton({ number, label, description, onClick }) {
|
|
return html`
|
|
<button
|
|
onClick=${onClick}
|
|
class="group w-full rounded-xl border border-selection/70 bg-surface2/55 p-3.5 text-left transition-[transform,border-color,background-color,box-shadow] duration-200 hover:-translate-y-0.5 hover:border-starting/55 hover:bg-surface2/90 hover:shadow-halo"
|
|
>
|
|
<div class="flex items-baseline gap-2.5">
|
|
<span class="font-mono text-starting">${number}.</span>
|
|
<span class="font-medium text-bright">${label}</span>
|
|
</div>
|
|
${description && html`
|
|
<p class="mt-1 pl-5 text-sm text-dim">${description}</p>
|
|
`}
|
|
</button>
|
|
`;
|
|
}
|