🎨 style: Address Minor UI Refresh Issues (#6552)

* 🎨 style: Adjust isSelected svg layout of ModelSpecItem

* style: fix modelSpec URL image beeing off-center; style: selected svg centered vertically

* style: Update CustomMenu component to use rounded-lg and enhance focus styles

* style: SidePanel top padding same as NewChat

* fix: prevent unnecessary space rendering in SplitText component

* style: Fix class names and enhance layout in Badge components

* feat: disable temporary chat when in chat

* style: handle > 1 lines in title Landing

* feat: enhance dynamic margin calculation based on line count and content height in Landing component

client/src/components/ui/Badge.tsx

@@ -1,3 +1,5 @@
+import type React from 'react';
+
 import { X, Plus } from 'lucide-react';
 import { motion } from 'framer-motion';
 import type { ButtonHTMLAttributes } from 'react';
@@ -7,10 +9,12 @@ import { cn } from '~/utils';
 interface BadgeProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   icon?: LucideIcon;
   label: string;
+  id?: string;
   isActive?: boolean;
   isEditing?: boolean;
   isDragging?: boolean;
   isAvailable: boolean;
+  isInChat?: boolean;
   onBadgeAction?: () => void;
   onToggle?: () => void;
 }
@@ -18,18 +22,27 @@ interface BadgeProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 export default function Badge({
   icon: Icon,
   label,
+  id,
   isActive = false,
   isEditing = false,
   isDragging = false,
   isAvailable = true,
+  isInChat = false,
   onBadgeAction,
   onToggle,
   className,
   ...props
 }: BadgeProps) {
   const isMoveable = isEditing && isAvailable;
+  const isDisabled = id === '1' && isInChat;
 
   const handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {
+    if (isDisabled) {
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
+
     if (!isEditing && onToggle) {
       if (typeof window !== 'undefined' && window.innerWidth >= 768) {
         e.preventDefault();
@@ -44,27 +57,30 @@ export default function Badge({
       onClick={handleClick}
       className={cn(
         'group relative inline-flex items-center gap-1.5 rounded-full px-4 py-1.5',
-        'border border-border-medium text-sm font-medium transition-shadow',
+        'border border-border-medium text-sm font-medium transition-shadow md:w-full',
+        'size-9 p-2 md:p-3',
         isActive
           ? 'bg-surface-active shadow-md'
           : 'bg-surface-chat shadow-sm hover:bg-surface-hover hover:shadow-md',
+        'active:scale-95 active:shadow-inner',
         isMoveable && 'cursor-move',
+        isDisabled && 'cursor-not-allowed opacity-50 hover:shadow-sm',
         className,
       )}
       animate={{
         scale: isDragging ? 1.1 : 1,
         boxShadow: isDragging ? '0 10px 25px rgba(0,0,0,0.1)' : undefined,
       }}
-      whileTap={{ scale: isDragging ? 1.1 : 0.97 }}
+      whileTap={{ scale: isDragging ? 1.1 : isDisabled ? 1 : 0.97 }}
       transition={{ type: 'tween', duration: 0.1, ease: 'easeOut' }}
       {...props}
     >
-      {Icon && <Icon className="relative h-4 w-4" />}
+      {Icon && <Icon className={cn('relative h-5 w-5 md:h-4 md:w-4', !label && 'mx-auto')} />}
       <span className="relative hidden md:inline">{label}</span>
 
       {isEditing && !isDragging && (
         <motion.button
-          className="absolute -right-1 -top-1 flex h-5 w-5 items-center justify-center rounded-full bg-surface-secondary-alt text-text-primary"
+          className="absolute -right-1 -top-1 flex h-6 w-6 items-center justify-center rounded-full bg-surface-secondary-alt text-text-primary shadow-sm md:h-5 md:w-5"
           initial={{ opacity: 0, scale: 0.8 }}
           animate={{ opacity: 1, scale: 1 }}
           exit={{ opacity: 0, scale: 0.8 }}

client/src/components/ui/SplitText.tsx

@@ -12,6 +12,7 @@ interface SplitTextProps {
   rootMargin?: string;
   textAlign?: 'left' | 'right' | 'center' | 'justify' | 'start' | 'end';
   onLetterAnimationComplete?: () => void;
+  onLineCountChange?: (lineCount: number) => void;
 }
 
 const SplitText: React.FC<SplitTextProps> = ({
@@ -25,6 +26,7 @@ const SplitText: React.FC<SplitTextProps> = ({
   rootMargin = '-100px',
   textAlign = 'center',
   onLetterAnimationComplete,
+  onLineCountChange,
 }) => {
   const words = text.split(' ').map((word) => word.split(''));
   const letters = words.flat();
@@ -32,6 +34,24 @@ const SplitText: React.FC<SplitTextProps> = ({
   const ref = useRef<HTMLParagraphElement>(null);
   const animatedCount = useRef(0);
 
+  const springs = useSprings(
+    letters.length,
+    letters.map((_, i) => ({
+      from: animationFrom,
+      to: inView
+        ? async (next: (props: any) => Promise<void>) => {
+          await next(animationTo);
+          animatedCount.current += 1;
+          if (animatedCount.current === letters.length && onLetterAnimationComplete) {
+            onLetterAnimationComplete();
+          }
+        }
+        : animationFrom,
+      delay: i * delay,
+      config: { easing },
+    })),
+  );
+
   useEffect(() => {
     const observer = new IntersectionObserver(
       ([entry]) => {
@@ -52,23 +72,22 @@ const SplitText: React.FC<SplitTextProps> = ({
     return () => observer.disconnect();
   }, [threshold, rootMargin]);
 
-  const springs = useSprings(
-    letters.length,
-    letters.map((_, i) => ({
-      from: animationFrom,
-      to: inView
-        ? async (next: (props: any) => Promise<void>) => {
-          await next(animationTo);
-          animatedCount.current += 1;
-          if (animatedCount.current === letters.length && onLetterAnimationComplete) {
-            onLetterAnimationComplete();
-          }
+  useEffect(() => {
+    if (ref.current && inView) {
+      const element = ref.current;
+      setTimeout(() => {
+        const lineHeight =
+          parseInt(getComputedStyle(element).lineHeight) ||
+          parseInt(getComputedStyle(element).fontSize) * 1.2;
+        const height = element.offsetHeight;
+        const lines = Math.round(height / lineHeight);
+
+        if (onLineCountChange) {
+          onLineCountChange(lines);
         }
-        : animationFrom,
-      delay: i * delay,
-      config: { easing },
-    })),
-  );
+      }, 100);
+    }
+  }, [inView, text, onLineCountChange]);
 
   return (
     <p
@@ -92,7 +111,9 @@ const SplitText: React.FC<SplitTextProps> = ({
               </animated.span>
             );
           })}
-          <span style={{ display: 'inline-block', width: '0.3em' }}>&nbsp;</span>
+          {wordIndex < words.length - 1 && (
+            <span style={{ display: 'inline-block', width: '0.3em' }}>&nbsp;</span>
+          )}
         </span>
       ))}
     </p>