feat: add vendor information to device components and update related UI elements

fix: update sidebar transition duration for smoother experience
chore: update package dependencies and versions for improved stability and features

components/welcome-banner.tsx

@@ -7,23 +7,34 @@ interface WelcomeBannerProps {
   lastName?: string | null;
 }
 
+const ANIMATION_DURATION_MS = 500;
 export function WelcomeBanner({ firstName, lastName }: WelcomeBannerProps) {
-  const [isVisible, setIsVisible] = useState(true);
+  const [isMounted, setIsMounted] = useState(true);
+  const [isFadingOut, setIsFadingOut] = useState(false);
 
   useEffect(() => {
-    const timer = setTimeout(() => {
-      setIsVisible(false);
+    const startFadeOutTimer = setTimeout(() => {
+      setIsFadingOut(true);
     }, 3000);
+    const unmountTimer = setTimeout(() => {
+      setIsMounted(false);
+    }, 3000 + ANIMATION_DURATION_MS);
 
-    return () => clearTimeout(timer);
+    return () => {
+      clearTimeout(startFadeOutTimer);
+      clearTimeout(unmountTimer);
+    };
   }, []);
 
-  if (!isVisible) {
+  if (!isMounted) {
     return null;
   }
 
   return (
-    <div className="text-sm font-mono px-2 p-1 fade-out-10 bg-green-500/10 text-green-900 dark:text-green-400">
+    <div
+      className={`text-sm font-mono px-2 p-1 bg-green-500/10 text-green-900 dark:text-green-400 ${isFadingOut ? "animate-out fade-out animate-duration-500 animate-ease-out" : "animate-in fade-in"
+        }`}
+    >
       Welcome,{" "}
       <span className="font-semibold">
         {firstName} {lastName}