From 045e51bc5c21b84c5fc562044df39d0a4b46bb76 Mon Sep 17 00:00:00 2001
From: karti <kartitripathi@gmail.com>
Date: Wed, 12 Aug 2026 19:55:38 -0700
Subject: [PATCH] Polish: team page title, and accent swatches that match the
 theme
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The accent swatches always previewed the light-mode value, which made the
near-black "Pig" swatch effectively invisible on a dark card — the one place
the preview needed to be accurate. Each accent is tuned twice because a colour
that reads well on white is usually too dark on near-black; the swatch now
shows the value for the theme actually in effect.

Team and the placeholder routes also set document titles, so every route in
the app is now distinguishable in history and in a tab strip.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 apps/web/src/App.tsx            |  3 +++
 apps/web/src/pages/Settings.tsx | 20 +++++++++++++-------
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
index 049a699..3de2721 100644
--- a/apps/web/src/App.tsx
+++ b/apps/web/src/App.tsx
@@ -17,6 +17,7 @@ import { SignIn } from '@/pages/SignIn';
 import { CreateProfile } from '@/pages/CreateProfile';
 import { PiggyMark } from '@/components/PiggyMark';
 import { EmptyState } from '@/components/ui';
+import { usePageTitle } from '@/lib/title';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -170,6 +171,7 @@ function Centered({ children }: { children: React.ReactNode }) {
 }
 
 function Placeholder({ title }: { title: string }) {
+  usePageTitle(title);
   return (
     <EmptyState
       title={title}
@@ -179,6 +181,7 @@ function Placeholder({ title }: { title: string }) {
 }
 
 function Team() {
+  usePageTitle('Team');
   const { data } = useQuery({
     queryKey: ['team'],
     queryFn: () =>
diff --git a/apps/web/src/pages/Settings.tsx b/apps/web/src/pages/Settings.tsx
index 4f71afb..2ee9059 100644
--- a/apps/web/src/pages/Settings.tsx
+++ b/apps/web/src/pages/Settings.tsx
@@ -42,7 +42,7 @@ export function Settings() {
 }
 
 function Appearance() {
-  const { mode, accent, setMode, setAccent, accents } = useTheme();
+  const { mode, accent, resolved, setMode, setAccent, accents } = useTheme();
 
   return (
     <Card>
@@ -95,14 +95,20 @@ function Appearance() {
                   ].join(' ')}
                 >
                   {/*
-                    The swatch previews the light-mode value while the app is in
-                    light mode and the dark value in dark mode, because the two
-                    are tuned separately and a single preview would misrepresent
-                    one of them.
+                    The swatch previews the value for the CURRENT theme, because
+                    each accent is tuned twice — a colour that reads well on
+                    white is usually too dark on near-black. Showing the light
+                    value in dark mode made the near-black "Pig" swatch
+                    effectively invisible against a dark card, which is exactly
+                    the misrepresentation this avoids.
                   */}
                   <span
-                    className="h-4 w-4 rounded-full border border-black/10"
-                    style={{ backgroundColor: `hsl(${definition.light.accent})` }}
+                    className="h-4 w-4 rounded-full border border-fg/15"
+                    style={{
+                      backgroundColor: `hsl(${
+                        resolved === 'dark' ? definition.dark.accent : definition.light.accent
+                      })`,
+                    }}
                     aria-hidden
                   />
                   {option.label}