add Emil-style UI polish pass (animations, shared components, feel)

client/src/components/shared/ConfirmDialog.tsx

@@ -40,16 +40,13 @@ export default function ConfirmDialog({
 
   return (
     <div
-      className="fixed inset-0 z-[10000] flex items-center justify-center px-4"
+      className="fixed inset-0 z-[10000] flex items-center justify-center px-4 trek-backdrop-enter"
       style={{ backgroundColor: 'rgba(15, 23, 42, 0.5)' }}
       onClick={onClose}
     >
       <div
-        className="rounded-2xl shadow-2xl w-full max-w-sm p-6"
-        style={{
-          animation: 'modalIn 0.2s ease-out forwards',
-          background: 'var(--bg-card)',
-        }}
+        className="trek-modal-enter rounded-2xl shadow-2xl w-full max-w-sm p-6"
+        style={{ background: 'var(--bg-card)' }}
         onClick={e => e.stopPropagation()}
       >
         <div className="flex items-start gap-4">
@@ -90,12 +87,6 @@ export default function ConfirmDialog({
         </div>
       </div>
 
-      <style>{`
-        @keyframes modalIn {
-          from { opacity: 0; transform: scale(0.95) translateY(-10px); }
-          to { opacity: 1; transform: scale(1) translateY(0); }
-        }
-      `}</style>
     </div>
   )
 }

client/src/components/shared/ContextMenu.tsx

@@ -65,7 +65,7 @@ export function ContextMenu({ menu, onClose }: ContextMenuProps) {
   if (!menu) return null
 
   return ReactDOM.createPortal(
-    <div ref={ref} style={{
+    <div ref={ref} className="trek-popover-enter" style={{
       position: 'fixed', left: menu.x, top: menu.y, zIndex: 999999,
       background: 'var(--bg-card)', borderRadius: 10, padding: '4px',
       border: '1px solid var(--border-primary)',
@@ -73,7 +73,7 @@ export function ContextMenu({ menu, onClose }: ContextMenuProps) {
       backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
       minWidth: 160,
       fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif",
-      animation: 'ctxIn 0.1s ease-out',
+      transformOrigin: 'top left',
     }}>
       {menu.items.filter(Boolean).map((item, i) => {
         if (item.divider) return <div key={i} style={{ height: 1, background: 'var(--border-faint)', margin: '3px 6px' }} />
@@ -95,7 +95,6 @@ export function ContextMenu({ menu, onClose }: ContextMenuProps) {
           </button>
         )
       })}
-      <style>{`@keyframes ctxIn { from { opacity: 0; transform: scale(0.95) } to { opacity: 1; transform: scale(1) } }`}</style>
     </div>,
     document.body
   )

client/src/components/shared/CopyButton.tsx

@@ -0,0 +1,65 @@
+import React, { useCallback, useState } from 'react'
+import { Copy, Check } from 'lucide-react'
+
+interface CopyButtonProps {
+  value: string
+  size?: number
+  title?: string
+  className?: string
+  onCopy?: () => void
+}
+
+// Button that morphs between copy icon and check icon for 1.5s after click.
+export function CopyButton({ value, size = 14, title, className, onCopy }: CopyButtonProps): React.ReactElement {
+  const [copied, setCopied] = useState(false)
+
+  const handleClick = useCallback(async (e: React.MouseEvent) => {
+    e.stopPropagation()
+    try {
+      await navigator.clipboard.writeText(value)
+      setCopied(true)
+      onCopy?.()
+      window.setTimeout(() => setCopied(false), 1500)
+    } catch {
+      // noop
+    }
+  }, [value, onCopy])
+
+  return (
+    <button
+      type="button"
+      onClick={handleClick}
+      title={title}
+      className={className}
+      style={{
+        position: 'relative',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: size + 12,
+        height: size + 12,
+        border: 'none',
+        background: 'transparent',
+        color: copied ? '#22c55e' : 'var(--text-muted)',
+        cursor: 'pointer',
+        borderRadius: 6,
+      }}
+    >
+      <Copy size={size} style={{
+        position: 'absolute',
+        transition: 'opacity 200ms cubic-bezier(0.23,1,0.32,1), transform 200ms cubic-bezier(0.23,1,0.32,1)',
+        opacity: copied ? 0 : 1,
+        transform: copied ? 'scale(0.6) rotate(-45deg)' : 'scale(1) rotate(0)',
+      }} />
+      <Check size={size} style={{
+        position: 'absolute',
+        transition: 'opacity 200ms cubic-bezier(0.23,1,0.32,1), transform 200ms cubic-bezier(0.23,1,0.32,1)',
+        opacity: copied ? 1 : 0,
+        transform: copied ? 'scale(1) rotate(0)' : 'scale(0.6) rotate(45deg)',
+        strokeWidth: 2.5,
+      }} />
+    </button>
+  )
+}
+
+export default CopyButton

client/src/components/shared/CustomSelect.tsx

@@ -104,7 +104,7 @@ export default function CustomSelect({
         <span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', color: selected ? 'var(--text-primary)' : 'var(--text-faint)' }}>
           {selected ? selected.label : placeholder}
         </span>
-        <ChevronDown size={sm ? 12 : 14} style={{ flexShrink: 0, color: 'var(--text-faint)', transition: 'transform 0.2s', transform: open ? 'rotate(180deg)' : 'none' }} />
+        <ChevronDown size={sm ? 12 : 14} style={{ flexShrink: 0, color: 'var(--text-faint)', transition: 'transform 200ms cubic-bezier(0.23,1,0.32,1)', transform: open ? 'rotate(180deg)' : 'none' }} />
       </button>
 
       {/* Dropdown */}
@@ -128,7 +128,9 @@ export default function CustomSelect({
           borderRadius: 10,
           boxShadow: '0 8px 32px rgba(0,0,0,0.12)',
           overflow: 'hidden',
-          animation: 'selectIn 0.15s ease-out',
+          animation: 'trek-menu-enter 200ms cubic-bezier(0.23, 1, 0.32, 1)',
+          transformOrigin: 'top center',
+          willChange: 'transform, opacity',
         }}>
           {/* Search */}
           {searchable && (
@@ -194,12 +196,6 @@ export default function CustomSelect({
         document.body
       )}
 
-      <style>{`
-        @keyframes selectIn {
-          from { opacity: 0; transform: translateY(-4px); }
-          to { opacity: 1; transform: translateY(0); }
-        }
-      `}</style>
     </div>
   )
 }

client/src/components/shared/LoadingImage.tsx

@@ -0,0 +1,36 @@
+import React, { useState, type ImgHTMLAttributes } from 'react'
+
+interface LoadingImageProps extends ImgHTMLAttributes<HTMLImageElement> {
+  containerClassName?: string
+  containerStyle?: React.CSSProperties
+}
+
+// Image with shimmer-placeholder until loaded. Drops the shimmer once native load fires.
+export function LoadingImage({
+  containerClassName, containerStyle, className, style, onLoad, ...imgProps
+}: LoadingImageProps): React.ReactElement {
+  const [loaded, setLoaded] = useState(false)
+  return (
+    <div className={containerClassName} style={{ position: 'relative', overflow: 'hidden', ...containerStyle }}>
+      {!loaded && (
+        <div
+          className="trek-skeleton"
+          style={{ position: 'absolute', inset: 0, borderRadius: 0 }}
+          aria-hidden
+        />
+      )}
+      <img
+        {...imgProps}
+        className={className}
+        style={{
+          ...style,
+          opacity: loaded ? 1 : 0,
+          transition: 'opacity 300ms cubic-bezier(0.23, 1, 0.32, 1)',
+        }}
+        onLoad={e => { setLoaded(true); onLoad?.(e) }}
+      />
+    </div>
+  )
+}
+
+export default LoadingImage

client/src/components/shared/Modal.tsx

@@ -50,7 +50,7 @@ export default function Modal({
 
   return (
     <div
-      className="fixed inset-0 z-[200] flex items-start sm:items-center justify-center px-4 modal-backdrop"
+      className="fixed inset-0 z-[200] flex items-start sm:items-center justify-center px-4 modal-backdrop trek-backdrop-enter"
       style={{ backgroundColor: 'rgba(15, 23, 42, 0.5)', paddingTop: 70, paddingBottom: 'calc(20px + var(--bottom-nav-h))', overflow: 'hidden' }}
       onMouseDown={e => { mouseDownTarget.current = e.target }}
       onClick={e => {
@@ -60,14 +60,11 @@ export default function Modal({
     >
       <div
         className={`
+          trek-modal-enter
           rounded-2xl shadow-2xl w-full ${sizeClasses[size] || sizeClasses.md}
           flex flex-col max-h-[calc(100vh-180px)] md:max-h-[calc(100vh-90px)]
-          animate-in fade-in zoom-in-95 duration-200
         `}
-        style={{
-          animation: 'modalIn 0.2s ease-out forwards',
-          background: 'var(--bg-card)',
-        }}
+        style={{ background: 'var(--bg-card)' }}
         onClick={e => e.stopPropagation()}
       >
         {/* Header */}
@@ -96,12 +93,6 @@ export default function Modal({
         )}
       </div>
 
-      <style>{`
-        @keyframes modalIn {
-          from { opacity: 0; transform: scale(0.95) translateY(-10px); }
-          to { opacity: 1; transform: scale(1) translateY(0); }
-        }
-      `}</style>
     </div>
   )
 }

client/src/components/shared/Skeleton.tsx

@@ -0,0 +1,70 @@
+import React from 'react'
+
+// Simple skeleton placeholder with shimmer. Size via className or props.
+export function Skeleton({
+  width, height, radius, className, style,
+}: {
+  width?: number | string
+  height?: number | string
+  radius?: number | string
+  className?: string
+  style?: React.CSSProperties
+}): React.ReactElement {
+  return (
+    <div
+      className={`trek-skeleton ${className ?? ''}`.trim()}
+      style={{
+        width,
+        height: height ?? 14,
+        borderRadius: radius,
+        ...style,
+      }}
+      aria-hidden
+    />
+  )
+}
+
+// Trip card skeleton matching SpotlightCard layout
+export function SpotlightSkeleton(): React.ReactElement {
+  return (
+    <div
+      className="relative rounded-3xl overflow-hidden mb-8"
+      style={{ minHeight: 340, background: 'var(--bg-tertiary)' }}
+    >
+      <div className="trek-skeleton absolute inset-0" style={{ borderRadius: 24 }} />
+      <div className="relative p-6 flex flex-col justify-end" style={{ minHeight: 340 }}>
+        <Skeleton width={160} height={40} radius={8} style={{ marginBottom: 8 }} />
+        <Skeleton width={220} height={16} radius={4} />
+      </div>
+    </div>
+  )
+}
+
+// Trip list item skeleton
+export function TripCardSkeleton(): React.ReactElement {
+  return (
+    <div
+      className="rounded-2xl border border-zinc-200 dark:border-zinc-700 overflow-hidden"
+      style={{ background: 'var(--bg-card)' }}
+    >
+      <Skeleton height={140} radius={0} />
+      <div className="p-4 flex flex-col gap-2">
+        <Skeleton width="60%" height={18} />
+        <Skeleton width="40%" height={12} />
+      </div>
+    </div>
+  )
+}
+
+// Day sidebar skeleton row
+export function DaySkeleton(): React.ReactElement {
+  return (
+    <div style={{ padding: '12px 16px', display: 'flex', flexDirection: 'column', gap: 8 }}>
+      <Skeleton width={120} height={16} />
+      <Skeleton width="80%" height={12} />
+      <Skeleton width="60%" height={12} />
+    </div>
+  )
+}
+
+export default Skeleton

client/src/components/shared/SlidingTabs.tsx

@@ -0,0 +1,126 @@
+import React, { useLayoutEffect, useRef, useState, type CSSProperties } from 'react'
+
+export interface SlidingTab<T extends string> {
+  id: T
+  label: React.ReactNode
+  title?: string
+  icon?: React.ComponentType<{ size?: number; className?: string }>
+  count?: number
+}
+
+interface SlidingTabsProps<T extends string> {
+  tabs: readonly SlidingTab<T>[]
+  activeTab: T
+  onChange: (id: T) => void
+  size?: 'sm' | 'md'
+  fullWidth?: boolean
+  className?: string
+  indicatorColor?: string
+  indicatorTextColor?: string
+}
+
+// Stripe-style sliding indicator — der aktive Pill gleitet zwischen Tabs.
+// Nutzt gemessene Offsets der Buttons + CSS transform.
+export function SlidingTabs<T extends string>({
+  tabs, activeTab, onChange, size = 'md', fullWidth, className,
+  indicatorColor = 'var(--accent)', indicatorTextColor = 'var(--accent-text)',
+}: SlidingTabsProps<T>): React.ReactElement {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const tabRefs = useRef<Map<T, HTMLButtonElement | null>>(new Map())
+  const [indicator, setIndicator] = useState<{ left: number; width: number; ready: boolean }>({ left: 0, width: 0, ready: false })
+
+  useLayoutEffect(() => {
+    const active = tabRefs.current.get(activeTab)
+    const container = containerRef.current
+    if (!active || !container) return
+    const containerRect = container.getBoundingClientRect()
+    const activeRect = active.getBoundingClientRect()
+    setIndicator({
+      left: activeRect.left - containerRect.left + container.scrollLeft,
+      width: activeRect.width,
+      ready: true,
+    })
+  }, [activeTab, tabs.length])
+
+  const padding = size === 'sm' ? '5px 12px' : '6px 14px'
+  const fontSize = size === 'sm' ? 12 : 13
+  const borderRadius = size === 'sm' ? 18 : 20
+
+  return (
+    <div
+      ref={containerRef}
+      className={className}
+      style={{
+        position: 'relative', display: 'flex', alignItems: 'center',
+        gap: 2, overflowX: 'auto', scrollbarWidth: 'none', msOverflowStyle: 'none',
+        width: fullWidth ? '100%' : undefined,
+      }}
+    >
+      {/* Sliding indicator */}
+      {indicator.ready && (
+        <div
+          aria-hidden
+          style={{
+            position: 'absolute',
+            top: '50%',
+            left: indicator.left,
+            width: indicator.width,
+            height: size === 'sm' ? 26 : 30,
+            background: indicatorColor,
+            borderRadius,
+            transform: 'translateY(-50%)',
+            transition: 'left 320ms cubic-bezier(0.77, 0, 0.175, 1), width 320ms cubic-bezier(0.77, 0, 0.175, 1)',
+            pointerEvents: 'none',
+            zIndex: 0,
+            willChange: 'left, width',
+          }}
+        />
+      )}
+      {tabs.map(tab => {
+        const isActive = tab.id === activeTab
+        const Icon = tab.icon
+        const btnStyle: CSSProperties = {
+          position: 'relative', zIndex: 1,
+          flexShrink: 0,
+          padding,
+          borderRadius,
+          border: 'none',
+          cursor: 'pointer',
+          fontSize,
+          fontWeight: isActive ? 600 : 500,
+          background: 'transparent',
+          color: isActive ? indicatorTextColor : 'var(--text-muted)',
+          fontFamily: 'inherit',
+          transition: 'color 220ms cubic-bezier(0.23, 1, 0.32, 1)',
+          display: 'flex', alignItems: 'center', gap: 6,
+          flex: fullWidth ? 1 : undefined,
+          justifyContent: 'center',
+          whiteSpace: 'nowrap',
+        }
+        return (
+          <button
+            key={tab.id}
+            ref={el => { tabRefs.current.set(tab.id, el) }}
+            onClick={() => onChange(tab.id)}
+            style={btnStyle}
+            title={tab.title ?? (typeof tab.label === 'string' ? tab.label : undefined)}
+          >
+            {Icon && <Icon size={size === 'sm' ? 13 : 15} />}
+            {tab.label}
+            {tab.count != null && (
+              <span style={{
+                fontSize: 10, fontWeight: 600,
+                padding: '1px 6px', borderRadius: 99, minWidth: 16,
+                background: isActive ? 'rgba(255,255,255,0.22)' : 'var(--bg-tertiary)',
+                color: isActive ? 'inherit' : 'var(--text-faint)',
+                textAlign: 'center',
+              }}>{tab.count}</span>
+            )}
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
+export default SlidingTabs

client/src/components/shared/Tooltip.tsx

@@ -68,6 +68,7 @@ export function Tooltip({ label, placement = 'bottom', delay = 250, disabled, ch
         <div
           ref={tooltipRef}
           role="tooltip"
+          className="trek-popover-enter"
           style={{
             position: 'fixed',
             top: coords?.top ?? -9999,
@@ -85,6 +86,7 @@ export function Tooltip({ label, placement = 'bottom', delay = 250, disabled, ch
             boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
             border: '1px solid var(--border-faint, #e5e7eb)',
             fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif",
+            transformOrigin: placement === 'top' ? 'bottom center' : placement === 'bottom' ? 'top center' : placement === 'left' ? 'center right' : 'center left',
           }}
         >
           {label}