Timeline rewrite to fix all bugs ever

package.json

@@ -91,6 +91,7 @@
     "slate-history": "^0.113.1",
     "slate-react": "^0.123.0",
     "ua-parser-js": "^1.0.41",
+    "virtua": "^0.48.8",
     "workbox-precaching": "^7.4.0"
   },
   "devDependencies": {
@@ -137,4 +138,4 @@
     "vitest": "^4.1.0",
     "wrangler": "^4.70.0"
   }
-}
+}

src/app/components/PaginationPlaceholders.tsx

@@ -0,0 +1,79 @@
+import { Box, Chip, Spinner, Text, color, config } from 'folds';
+import { MessageBase, CompactPlaceholder, DefaultPlaceholder } from '$components/message';
+
+export type PaginationStatus = 'idle' | 'loading' | 'error';
+
+export interface PaginationLoaderProps {
+  status: PaginationStatus;
+  direction: 'backward' | 'forward';
+  isCompact: boolean;
+  isEmpty: boolean;
+  onRetry: () => void;
+  observerRef?: (node: HTMLElement | null) => void;
+}
+
+export function PaginationLoader({
+  status,
+  direction,
+  isCompact,
+  isEmpty,
+  onRetry,
+  observerRef,
+}: PaginationLoaderProps) {
+  if (status === 'error') {
+    return (
+      <Box
+        justifyContent="Center"
+        alignItems="Center"
+        gap="200"
+        style={{ padding: config.space.S300 }}
+      >
+        <Text style={{ color: color.Critical.Main }} size="T300">
+          {direction === 'backward' ? 'Failed to load history.' : 'Failed to load messages.'}
+        </Text>
+        <Chip variant="SurfaceVariant" radii="Pill" outlined onClick={onRetry}>
+          <Text size="B300">Retry</Text>
+        </Chip>
+      </Box>
+    );
+  }
+
+  if (isEmpty) {
+    const count = isCompact ? 5 : 3;
+    const anchorIndex = direction === 'backward' ? count - 1 : 0;
+    const skeletonKeys = Array.from({ length: count }, (_, idx) => `skeleton-${direction}-${idx}`);
+
+    return (
+      <>
+        {skeletonKeys.map((skeletonKey, i) => {
+          const attachRef = i === anchorIndex ? observerRef : undefined;
+          return (
+            <MessageBase key={skeletonKey} ref={attachRef}>
+              {isCompact ? <CompactPlaceholder /> : <DefaultPlaceholder />}
+            </MessageBase>
+          );
+        })}
+      </>
+    );
+  }
+
+  return (
+    <Box style={{ position: 'relative', width: '100%', height: '60px', overflowAnchor: 'none' }}>
+      <div
+        ref={observerRef}
+        style={{
+          position: 'absolute',
+          [direction === 'backward' ? 'top' : 'bottom']: 0,
+          width: '100%',
+          height: '1px',
+        }}
+      />
+
+      {status === 'loading' && (
+        <Box justifyContent="Center" alignItems="Center" style={{ position: 'absolute', inset: 0 }}>
+          <Spinner variant="Secondary" size="400" />
+        </Box>
+      )}
+    </Box>
+  );
+}

src/app/features/room/RoomTimeline.css.ts

@@ -1,6 +1,6 @@
 import { globalStyle, style } from '@vanilla-extract/css';
 import { RecipeVariants, recipe } from '@vanilla-extract/recipes';
-import { DefaultReset, config } from 'folds';
+import { DefaultReset, color, config, toRem } from 'folds';
 
 export const TimelineFloat = recipe({
   base: [
@@ -29,17 +29,71 @@ export const TimelineFloat = recipe({
 });
 
 export type TimelineFloatVariants = RecipeVariants<typeof TimelineFloat>;
-
 export const messageList = style({
-  display: 'flex',
-  flexDirection: 'column',
-  width: '100%',
+  overflowY: 'scroll',
+  scrollbarGutter: 'stable',
+
+  '@supports': {
+    'not selector(::-webkit-scrollbar)': {
+      scrollbarWidth: 'auto',
+      selectors: {
+        '&:hover, &:has(*:hover)': {
+          scrollbarColor: `${color.SurfaceVariant.ContainerLine} ${color.SurfaceVariant.ContainerActive}`,
+        },
+      },
+    },
+  },
+
+  selectors: {
+    '&::-webkit-scrollbar': {
+      width: toRem(16),
+      height: toRem(16),
+    },
+    '&::-webkit-scrollbar-corner': {
+      backgroundColor: 'transparent',
+    },
+    '&::-webkit-scrollbar-thumb': {
+      backgroundColor: 'transparent',
+      borderRadius: config.radii.Pill,
+      minHeight: toRem(35),
+      border: `${toRem(4)} solid transparent`,
+      backgroundClip: 'padding-box',
+    },
+    '&::-webkit-scrollbar-track': {
+      backgroundColor: 'transparent',
+      borderRadius: config.radii.Pill,
+      border: `${toRem(4)} solid transparent`,
+      backgroundClip: 'padding-box',
+    },
+    '&:hover::-webkit-scrollbar-thumb, &:has(*:hover)::-webkit-scrollbar-thumb': {
+      backgroundColor: color.SurfaceVariant.ContainerLine,
+    },
+    '&:hover::-webkit-scrollbar-track, &:has(*:hover)::-webkit-scrollbar-track': {
+      backgroundColor: color.SurfaceVariant.ContainerActive,
+    },
+  },
+});
+globalStyle(`${messageList} > *`, {
+  scrollbarWidth: 'auto',
+  scrollbarColor: 'auto',
+});
+
+globalStyle(`body ${messageList} > *`, {
+  overflowAnchor: 'none',
 });
 
 globalStyle(`body ${messageList} [data-message-id]`, {
+  overflowAnchor: 'auto',
   transition: 'background-color 0.1s ease-in-out !important',
+  position: 'relative',
+  zIndex: 1,
 });
 
 globalStyle(`body ${messageList} [data-message-id]:hover`, {
   backgroundColor: 'var(--sable-surface-container-hover) !important',
+  zIndex: 2,
+});
+
+globalStyle(`body ${messageList} [data-message-id]:focus-within`, {
+  zIndex: 10,
 });