From 31862f3a401613c340d9d196037a7a3d734fc1d5 Mon Sep 17 00:00:00 2001
From: teernisse <teernisse@visiostack.com>
Date: Wed, 25 Feb 2026 16:32:08 -0500
Subject: [PATCH] perf(dashboard): optimize CSS transitions and add entrance
 animations
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 dashboard/components/App.js           | 4 ++--
 dashboard/components/MessageBubble.js | 2 +-
 dashboard/components/OptionButton.js  | 2 +-
 dashboard/components/QuestionBlock.js | 4 ++--
 dashboard/components/Sidebar.js       | 4 ++--
 dashboard/components/SimpleInput.js   | 4 ++--
 6 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/dashboard/components/App.js b/dashboard/components/App.js
index 7438f9e..ac271d1 100644
--- a/dashboard/components/App.js
+++ b/dashboard/components/App.js
@@ -347,11 +347,11 @@ export function App() {
 
       <main class="px-6 pb-6 pt-6">
         ${loading ? html`
-          <div class="glass-panel flex items-center justify-center rounded-2xl py-24">
+          <div class="glass-panel animate-fade-in-up flex items-center justify-center rounded-2xl py-24">
             <div class="font-mono text-dim">Loading sessions...</div>
           </div>
         ` : error ? html`
-          <div class="glass-panel flex items-center justify-center rounded-2xl py-24">
+          <div class="glass-panel animate-fade-in-up flex items-center justify-center rounded-2xl py-24">
             <div class="text-center">
               <p class="mb-2 font-display text-lg text-attention">Failed to connect to API</p>
               <p class="font-mono text-sm text-dim">${error}</p>
diff --git a/dashboard/components/MessageBubble.js b/dashboard/components/MessageBubble.js
index 88956d5..fbf65b2 100644
--- a/dashboard/components/MessageBubble.js
+++ b/dashboard/components/MessageBubble.js
@@ -17,7 +17,7 @@ export function MessageBubble({ msg, userBg, compact = false, formatTime }) {
   const maxW = compact ? 'max-w-[92%]' : 'max-w-[86%]';
 
   return html`
-    <div class="flex ${isUser ? 'justify-end' : 'justify-start'} animate-fade-in-up">
+    <div class="flex ${isUser ? 'justify-end' : 'justify-start'} ${compact ? '' : 'animate-fade-in-up'}">
       <div
         class="${maxW} rounded-2xl ${pad} ${
           isUser
diff --git a/dashboard/components/OptionButton.js b/dashboard/components/OptionButton.js
index 7370610..190668a 100644
--- a/dashboard/components/OptionButton.js
+++ b/dashboard/components/OptionButton.js
@@ -4,7 +4,7 @@ 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-all duration-200 hover:-translate-y-0.5 hover:border-starting/55 hover:bg-surface2/90 hover:shadow-halo"
+      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>
diff --git a/dashboard/components/QuestionBlock.js b/dashboard/components/QuestionBlock.js
index 3bd9142..5561bd2 100644
--- a/dashboard/components/QuestionBlock.js
+++ b/dashboard/components/QuestionBlock.js
@@ -73,12 +73,12 @@ export function QuestionBlock({ questions, sessionId, status, onRespond }) {
           onBlur=${() => setFocused(false)}
           placeholder="Type a response..."
           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 placeholder:text-dim focus:outline-none"
+          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-all hover:-translate-y-0.5 hover:brightness-110"
+          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
diff --git a/dashboard/components/Sidebar.js b/dashboard/components/Sidebar.js
index 8c48eb5..b4b31d7 100644
--- a/dashboard/components/Sidebar.js
+++ b/dashboard/components/Sidebar.js
@@ -46,7 +46,7 @@ export function Sidebar({ projectGroups, selectedProject, onSelectProject, total
         <!-- All Projects -->
         <button
           onClick=${() => onSelectProject(null)}
-          class="group flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-left transition-all ${
+          class="group flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-left transition-colors duration-150 ${
             selectedProject === null
               ? 'bg-selection/50'
               : 'hover:bg-selection/25'
@@ -77,7 +77,7 @@ export function Sidebar({ projectGroups, selectedProject, onSelectProject, total
             <button
               key=${group.projectDir}
               onClick=${() => onSelectProject(group.projectDir)}
-              class="group flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-left transition-all ${
+              class="group flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-left transition-colors duration-150 ${
                 isSelected
                   ? 'bg-selection/50'
                   : 'hover:bg-selection/25'
diff --git a/dashboard/components/SimpleInput.js b/dashboard/components/SimpleInput.js
index 8ef9c8d..11914fc 100644
--- a/dashboard/components/SimpleInput.js
+++ b/dashboard/components/SimpleInput.js
@@ -34,12 +34,12 @@ export function SimpleInput({ sessionId, status, onRespond }) {
         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 placeholder:text-dim focus:outline-none"
+        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-all hover:-translate-y-0.5 hover:brightness-110"
+        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