fix: replace transition-all with specific transition properties for better performance

- Replace transition-all with transition-[width] in Sidebar.tsx for width animations
- Replace transition-all with specific properties in animated-tabs.tsx for hover/active indicators
- Replace transition-all with transition-[background-color,border-color,box-shadow] in navbar.tsx
- Replace transition-all with transition-[width] in audio.tsx volume bar
- Replace transition-all with transition-[background-color,border-color,color] in thread.tsx
- Replace transition-all with transition-[box-shadow] in all tool-ui status cards (28+ files)

This reduces unnecessary browser layout/paint work by only animating the specific
properties that change, avoiding expensive recalculations for properties like
width, height, margin, and padding that don't need animation.

Fixes #1147

surfsense_web/components/ui/animated-tabs.tsx

@@ -365,7 +365,7 @@ const TabsList = forwardRef<
 						{showHoverEffect && (
 							<div
 								className={cn(
-									"absolute transition-all duration-300 ease-out flex items-center z-0",
+									"absolute transition-[left,width,opacity] duration-300 ease-out flex items-center z-0",
 									SIZE_CLASSES[size],
 									HOVER_INDICATOR_CLASSES[variant],
 									hoverIndicatorClassName
@@ -460,7 +460,7 @@ const TabsList = forwardRef<
 						{showActiveIndicator && variant !== "pills" && activeIndex >= 0 && (
 							<div
 								className={cn(
-									"absolute transition-all duration-300 ease-out z-10",
+									"absolute transition-[left,width,bottom,top] duration-300 ease-out z-10",
 									ACTIVE_INDICATOR_CLASSES[variant],
 									activeIndicatorPosition === "top" ? "top-[-1px]" : "bottom-[-1px]",
 									activeIndicatorClassName