chore(ui): style improvements

Signed-off-by: Ettore Di Giacinto <mudler@localai.io>

Author: mudler

core/http/react-ui/src/App.css

@@ -142,6 +142,7 @@
   box-shadow: var(--shadow-sidebar);
   transition: width var(--duration-normal) var(--ease-default),
               transform var(--duration-normal) var(--ease-default);
+  will-change: transform;
 }
 
 .sidebar-overlay {
@@ -244,6 +245,7 @@
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
+  transition: opacity 150ms ease;
 }
 
 .nav-external {
@@ -539,23 +541,23 @@
 }
 
 .toast-success {
-  background: rgba(20, 184, 166, 0.15);
-  border: 1px solid rgba(20, 184, 166, 0.3);
+  background: var(--color-success-light);
+  border: 1px solid var(--color-success-border);
   color: var(--color-success);
 }
 .toast-error {
-  background: rgba(239, 68, 68, 0.15);
-  border: 1px solid rgba(239, 68, 68, 0.3);
+  background: var(--color-error-light);
+  border: 1px solid var(--color-error-border);
   color: var(--color-error);
 }
 .toast-warning {
-  background: rgba(245, 158, 11, 0.15);
-  border: 1px solid rgba(245, 158, 11, 0.3);
+  background: var(--color-warning-light);
+  border: 1px solid var(--color-warning-border);
   color: var(--color-warning);
 }
 .toast-info {
-  background: rgba(56, 189, 248, 0.15);
-  border: 1px solid rgba(56, 189, 248, 0.3);
+  background: var(--color-info-light);
+  border: 1px solid var(--color-info-border);
   color: var(--color-info);
 }
 
@@ -747,12 +749,13 @@
   border: 1px solid var(--color-border-subtle);
   border-radius: var(--radius-lg);
   padding: var(--spacing-md);
-  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
+  transition: border-color var(--duration-fast), box-shadow var(--duration-fast), transform var(--duration-fast);
 }
 
 .card:hover {
   border-color: var(--color-border-default);
   box-shadow: var(--shadow-sm);
+  transform: translateY(-1px);
 }
 
 .card-grid {
@@ -773,7 +776,7 @@
   font-weight: 500;
   cursor: pointer;
   border: none;
-  transition: all var(--duration-fast) var(--ease-default);
+  transition: background var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default), box-shadow var(--duration-fast) var(--ease-default);
   text-decoration: none;
 }
 
@@ -1410,6 +1413,37 @@
   50% { opacity: 0.5; }
 }
 
+@keyframes messageSlideIn {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes dropdownIn {
+  from { opacity: 0; transform: translateY(-4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes completionGlow {
+  0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.2); }
+  50% { box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1); }
+  100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
+}
+
+/* Page route transitions */
+.page-transition {
+  animation: fadeIn 200ms ease;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+}
+
+/* Completion glow on streaming finish */
+.chat-message-new .chat-message-content {
+  animation: completionGlow 600ms ease-out;
+}
+
 /* Chat-specific styles */
 .chat-layout {
   display: flex;
@@ -1468,12 +1502,13 @@
   cursor: pointer;
   font-size: 0.8125rem;
   color: var(--color-text-secondary);
-  transition: all var(--duration-fast);
+  transition: background var(--duration-fast), color var(--duration-fast), transform var(--duration-fast);
   margin-bottom: 2px;
 }
 
 .chat-list-item:hover {
   background: var(--color-primary-light);
+  transform: translateX(2px);
 }
 
 .chat-list-item.active {
@@ -1570,7 +1605,7 @@
   gap: var(--spacing-sm);
   max-width: 80%;
   min-width: 0;
-  animation: fadeIn 200ms ease;
+  animation: messageSlideIn 250ms ease-out;
 }
 
 .chat-message-user {
@@ -1740,7 +1775,7 @@
 }
 .chat-input-wrapper:focus-within {
   border-color: var(--color-primary-border);
-  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12), 0 0 12px rgba(99, 102, 241, 0.06);
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12), 0 0 12px rgba(59, 130, 246, 0.06);
 }
 
 .chat-attach-btn {
@@ -1798,6 +1833,9 @@
   opacity: 0.3;
   cursor: not-allowed;
 }
+.chat-send-btn:active:not(:disabled) {
+  transform: scale(0.92);
+}
 
 .chat-stop-btn {
   padding: var(--spacing-xs);
@@ -2128,13 +2166,13 @@
   overflow-y: auto;
 }
 .chat-activity-thinking {
-  border-left-color: rgba(99, 102, 241, 0.3);
+  border-left-color: rgba(59, 130, 246, 0.3);
 }
 .chat-activity-tool-call {
-  border-left-color: rgba(139, 92, 246, 0.3);
+  border-left-color: rgba(245, 158, 11, 0.3);
 }
 .chat-activity-tool-result {
-  border-left-color: rgba(20, 184, 166, 0.3);
+  border-left-color: rgba(34, 197, 94, 0.3);
 }
 
 /* Context window progress bar */
@@ -2230,6 +2268,7 @@
   border: 1px solid var(--color-border-subtle);
   border-radius: var(--radius-md);
   box-shadow: var(--shadow-lg);
+  animation: dropdownIn 120ms ease-out;
 }
 .chat-mcp-dropdown-loading,
 .chat-mcp-dropdown-empty {
@@ -2305,15 +2344,15 @@
   background: var(--color-text-tertiary);
 }
 .chat-client-mcp-status-connected {
-  background: #22c55e;
+  background: var(--color-success);
   box-shadow: 0 0 4px rgba(34, 197, 94, 0.5);
 }
 .chat-client-mcp-status-connecting {
-  background: #f59e0b;
+  background: var(--color-warning);
   animation: pulse 1s infinite;
 }
 .chat-client-mcp-status-error {
-  background: #ef4444;
+  background: var(--color-error);
 }
 .chat-client-mcp-status-disconnected {
   background: var(--color-text-tertiary);
@@ -2394,6 +2433,7 @@
   transform: translateX(100%);
   transition: transform 250ms var(--ease-default);
   box-shadow: var(--shadow-lg);
+  will-change: transform;
 }
 .chat-settings-drawer.open {
   transform: translateX(0);
@@ -2488,7 +2528,7 @@
 
 /* Max tokens/sec badge */
 .chat-max-tps-badge {
-  background: rgba(99, 102, 241, 0.15);
+  background: rgba(59, 130, 246, 0.15);
   color: var(--color-primary);
   padding: 1px 6px;
   border-radius: var(--radius-full);
@@ -2542,7 +2582,7 @@
   align-items: center;
   gap: 4px;
   padding: 2px 6px;
-  background: rgba(99, 102, 241, 0.1);
+  background: rgba(59, 130, 246, 0.1);
   border-radius: var(--radius-sm);
   font-size: 0.7rem;
   color: var(--color-text-secondary);
@@ -3097,6 +3137,7 @@
   padding: var(--spacing-lg);
   box-shadow: var(--shadow-lg);
   animation: slideUp 150ms ease;
+  will-change: transform, opacity;
 }
 @keyframes slideUp {
   from { opacity: 0; transform: translateY(8px); }
@@ -3249,7 +3290,7 @@
 }
 .home-input-container:focus-within {
   border-color: var(--color-primary-border);
-  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12), 0 0 12px rgba(99, 102, 241, 0.06);
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12), 0 0 12px rgba(59, 130, 246, 0.06);
 }
 .home-textarea {
   width: 100%;
@@ -3320,6 +3361,9 @@
   opacity: 0.3;
   cursor: not-allowed;
 }
+.home-send-btn:active:not(:disabled) {
+  transform: scale(0.92);
+}
 
 /* Home quick links */
 .home-quick-links {
@@ -3347,6 +3391,7 @@
 .home-link-btn:hover {
   border-color: var(--color-primary-border);
   color: var(--color-primary);
+  transform: translateY(-1px);
 }
 
 /* Home loaded models */

core/http/react-ui/src/App.jsx

@@ -29,6 +29,11 @@ export default function App() {
     return () => window.removeEventListener('sidebar-collapse', handler)
   }, [])
 
+  // Scroll to top on route change
+  useEffect(() => {
+    window.scrollTo(0, 0)
+  }, [location.pathname])
+
   const layoutClasses = [
     'app-layout',
     isChatRoute ? 'app-layout-chat' : '',
@@ -51,7 +56,9 @@ export default function App() {
           <span className="mobile-title">LocalAI</span>
         </header>
         <div className="main-content-inner">
-          <Outlet context={{ addToast }} />
+          <div className="page-transition" key={location.pathname}>
+            <Outlet context={{ addToast }} />
+          </div>
         </div>
         {!isChatRoute && (
           <footer className="app-footer">

core/http/react-ui/src/components/ConfirmDialog.jsx

@@ -10,29 +10,68 @@ export default function ConfirmDialog({
   onConfirm,
   onCancel,
 }) {
+  const dialogRef = useRef(null)
   const confirmRef = useRef(null)
 
   useEffect(() => {
-    if (open) {
-      confirmRef.current?.focus()
-      const handleKey = (e) => {
-        if (e.key === 'Escape') onCancel?.()
+    if (!open) return
+
+    confirmRef.current?.focus()
+
+    const dialog = dialogRef.current
+    if (!dialog) return
+
+    const focusableSelector = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    const getFocusable = () => dialog.querySelectorAll(focusableSelector)
+
+    const handleKeyDown = (e) => {
+      if (e.key === 'Escape') {
+        onCancel?.()
+        return
+      }
+      if (e.key !== 'Tab') return
+      const focusable = getFocusable()
+      if (focusable.length === 0) return
+      const first = focusable[0]
+      const last = focusable[focusable.length - 1]
+      if (e.shiftKey) {
+        if (document.activeElement === first) {
+          e.preventDefault()
+          last.focus()
+        }
+      } else {
+        if (document.activeElement === last) {
+          e.preventDefault()
+          first.focus()
+        }
       }
-      document.addEventListener('keydown', handleKey)
-      return () => document.removeEventListener('keydown', handleKey)
     }
+
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
   }, [open, onCancel])
 
   if (!open) return null
 
+  const titleId = 'confirm-dialog-title'
+  const bodyId = 'confirm-dialog-body'
+
   return (
     <div className="confirm-dialog-backdrop" onClick={onCancel}>
-      <div className="confirm-dialog" onClick={(e) => e.stopPropagation()}>
+      <div
+        ref={dialogRef}
+        className="confirm-dialog"
+        role="alertdialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
+        aria-describedby={message ? bodyId : undefined}
+        onClick={(e) => e.stopPropagation()}
+      >
         <div className="confirm-dialog-header">
           {danger && <i className="fas fa-exclamation-triangle confirm-dialog-danger-icon" />}
-          <span className="confirm-dialog-title">{title}</span>
+          <span id={titleId} className="confirm-dialog-title">{title}</span>
         </div>
-        {message && <div className="confirm-dialog-body">{message}</div>}
+        {message && <div id={bodyId} className="confirm-dialog-body">{message}</div>}
         <div className="confirm-dialog-actions">
           <button className="btn btn-secondary btn-sm" onClick={onCancel}>
             {cancelLabel}