From a23dd239ba4145fe1fb0fa24295b1eae2dc1f8a0 Mon Sep 17 00:00:00 2001
From: Void <void@minds.void.gamecult.org>
Date: Mon, 9 Nov 2026 10:50:24 +0000
Subject: [PATCH] Room list: steady scrim behind rows over the scene, icon on
 unjoined rows

With the background scene on, nav rows were fully clear and the ridges showed through
their text. Rows now carry the theme's own surface at 62% (80% on hover and selected).
An unjoined row (Commons) gets the same leading room icon as a joined one.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 src/app/components/nav/styles.css.ts        | 11 +++++++++++
 src/app/features/estate/EstateNavigator.tsx | 13 +++++++++----
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/app/components/nav/styles.css.ts b/src/app/components/nav/styles.css.ts
index 48b2a4d3..a7f3053d 100644
--- a/src/app/components/nav/styles.css.ts
+++ b/src/app/components/nav/styles.css.ts
@@ -1,6 +1,7 @@
 import { ComplexStyleRule, createVar, style } from '@vanilla-extract/css';
 import { RecipeVariants, recipe } from '@vanilla-extract/recipes';
 import { ContainerColor, DefaultReset, Disabled, RadiiVariant, color, config, toRem } from 'folds';
+import { surfaceInk } from '../../features/scene/sceneShell.css';
 
 export const NavCategory = style([
   DefaultReset,
@@ -61,6 +62,16 @@ const NavItemBase = style({
     '&[data-hover=true]': {
       backgroundColor: ContainerHover,
     },
+    // While the background scene runs the shell is clear (sceneShell.css.ts); a row is a steady
+    // scrim of the theme's own surface, so ridges never show through its text. Hover and the
+    // selected row strengthen it.
+    ':root[data-scene] &': {
+      backgroundColor: `color-mix(in srgb, ${surfaceInk} 62%, transparent)`,
+    },
+    ':root[data-scene] &:hover, :root[data-scene] &:focus-visible, :root[data-scene] &[data-hover=true], :root[data-scene] &[aria-selected=true]':
+      {
+        backgroundColor: `color-mix(in srgb, ${surfaceInk} 80%, transparent)`,
+      },
     [`&:has(.${NavLink}:active)`]: {
       backgroundColor: ContainerActive,
     },
diff --git a/src/app/features/estate/EstateNavigator.tsx b/src/app/features/estate/EstateNavigator.tsx
index 6fa4bf48..29451c92 100644
--- a/src/app/features/estate/EstateNavigator.tsx
+++ b/src/app/features/estate/EstateNavigator.tsx
@@ -1,7 +1,7 @@
 import React, { MouseEventHandler, ReactNode, useCallback, useMemo, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
-import { Avatar, Box, Chip, Icon, IconButton, Icons, Spinner, Text, color } from 'folds';
+import { Avatar, Box, Chip, Icon, IconButton, Icons, Spinner, Text, color, config } from 'folds';
 import { PageNav, PageNavContent, PageNavHeader } from '../../components/page';
 import {
   NavButton,
@@ -76,9 +76,14 @@ function JoinRow({ room }: { room: EstateRoom }) {
     <NavItem variant="Background" radii="400">
       <Box grow="Yes" alignItems="Center" gap="200" style={{ padding: '0 8px', minHeight: 38 }}>
         <NavItemContent>
-          <Text as="span" size="Inherit" truncate>
-            {room.name}
-          </Text>
+          <Box as="span" grow="Yes" alignItems="Center" gap="200">
+            <Avatar size="200" radii="400">
+              <Icon src={Icons.Hash} size="100" style={{ opacity: config.opacity.P300 }} />
+            </Avatar>
+            <Text as="span" size="Inherit" truncate>
+              {room.name}
+            </Text>
+          </Box>
         </NavItemContent>
         {state.status === AsyncStatus.Error && (
           <Text