feat: add Vite configuration with custom plugins and server settings

src/app/components/title-bar/TitleBar.css.ts

@@ -0,0 +1,77 @@
+import { style, keyframes } from '@vanilla-extract/css';
+import { color, config } from 'folds';
+
+const wipeIn = keyframes({
+  '0%': {
+    clipPath: 'inset(0 100% 0 0)',
+    opacity: 0,
+  },
+  '100%': {
+    clipPath: 'inset(0 0 0 0)',
+    opacity: 1,
+  },
+});
+
+const wipeOut = keyframes({
+  '0%': {
+    clipPath: 'inset(0 0 0 0)',
+    opacity: 1,
+  },
+  '100%': {
+    clipPath: 'inset(0 100% 0 0)',
+    opacity: 0,
+  },
+});
+
+export const NewMessagePill = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: config.space.S100,
+  backgroundColor: '#2E7D32',
+  color: '#ffffff',
+  padding: `${config.space.S100} ${config.space.S200}`,
+  borderRadius: '999px',
+  cursor: 'pointer',
+  fontSize: '12px',
+  fontWeight: 500,
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  maxWidth: '200px',
+  animation: `${wipeIn} 0.3s ease-out forwards`,
+  transition: 'background-color 0.15s ease',
+  WebkitAppRegion: 'no-drag',
+  selectors: {
+    '&:hover': {
+      backgroundColor: '#388E3C',
+    },
+  },
+});
+
+export const NewMessagePillExiting = style({
+  animation: `${wipeOut} 0.2s ease-in forwards`,
+});
+
+export const TitleBar = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  height: '32px',
+  minHeight: '32px',
+  backgroundColor: color.Surface.Container,
+  borderBottom: `1px solid ${color.Surface.ContainerLine}`,
+  position: 'relative',
+  zIndex: 1000,
+  userSelect: 'none',
+  WebkitUserSelect: 'none',
+});
+
+export const TitleBarDragRegion = style({
+  display: 'flex',
+  alignItems: 'center',
+  height: '100%',
+  flexGrow: 1,
+  paddingLeft: config.space.S200,
+  cursor: 'default',
+  WebkitAppRegion: 'drag',
+  color: color.Surface.OnContainer,
+});