feat: add Vite configuration with custom plugins and server settings

src/app/components/message/layout/Base.tsx

@@ -4,10 +4,10 @@ import classNames from 'classnames';
 import * as css from './layout.css';
 
 export const MessageBase = as<'div', css.MessageBaseVariants>(
-  ({ className, highlight, selected, collapse, autoCollapse, space, ...props }, ref) => (
+  ({ className, highlight, selected, collapse, autoCollapse, space, newMessage, ...props }, ref) => (
     <div
       className={classNames(
-        css.MessageBase({ highlight, selected, collapse, autoCollapse, space }),
+        css.MessageBase({ highlight, selected, collapse, autoCollapse, space, newMessage }),
         className
       )}
       {...props}

src/app/components/message/layout/layout.css.ts

@@ -58,6 +58,17 @@ const highlightAnime = keyframes({
     backgroundColor: color.Primary.Container,
   },
 });
+
+export const newMessageAnime = keyframes({
+  '0%': {
+    opacity: 0,
+    transform: 'translateY(8px)',
+  },
+  '100%': {
+    opacity: 1,
+    transform: 'translateY(0)',
+  },
+});
 const HighlightVariant = styleVariants({
   true: {
     animation: `${highlightAnime} 2000ms ease-in-out`,
@@ -71,6 +82,13 @@ const SelectedVariant = styleVariants({
   },
 });
 
+const NewMessageVariant = styleVariants({
+  true: {
+    animation: `${newMessageAnime} 300ms ease-out`,
+    animationFillMode: 'backwards',
+  },
+});
+
 const AutoCollapse = style({
   selectors: {
     [`&+&`]: {
@@ -86,6 +104,12 @@ export const MessageBase = recipe({
       marginTop: SpacingVar,
       padding: `${config.space.S100} ${config.space.S200} ${config.space.S100} ${config.space.S400}`,
       borderRadius: `0 ${config.radii.R400} ${config.radii.R400} 0`,
+      transition: 'background-color 150ms ease-out',
+      selectors: {
+        '&:hover': {
+          backgroundColor: color.Surface.ContainerHover,
+        },
+      },
     },
   ],
   variants: {
@@ -100,6 +124,7 @@ export const MessageBase = recipe({
     },
     highlight: HighlightVariant,
     selected: SelectedVariant,
+    newMessage: NewMessageVariant,
   },
   defaultVariants: {
     space: '400',
@@ -165,6 +190,9 @@ export const Username = style({
   overflow: 'hidden',
   whiteSpace: 'nowrap',
   textOverflow: 'ellipsis',
+  // Allow text selection while keeping button clickable
+  userSelect: 'text',
+  WebkitUserSelect: 'text',
   selectors: {
     'button&': {
       cursor: 'pointer',