From 0fd441540cca8aae8c951b00220fe4cb265710b4 Mon Sep 17 00:00:00 2001
From: fyui001 <yun.cod@gmail.com>
Date: Fri, 10 Jul 2026 02:19:57 +0900
Subject: [PATCH] Polish table header and sidebar visuals

Style the sticky table header with the dedicated table-header tokens
so it stays distinct from rows when scrolled, fix the sidebar brand
row to the same height as the top bar so their borders align, and
re-tint the note editor palette to match the zinc color system.
---
 components/common/blocknoteTheme.ts | 50 ++++++++++++++---------------
 components/layout/AppShell.tsx      |  6 ++--
 components/ui/table.tsx             |  7 ++--
 3 files changed, 33 insertions(+), 30 deletions(-)

diff --git a/components/common/blocknoteTheme.ts b/components/common/blocknoteTheme.ts
index cd4888a..0cb94f6 100644
--- a/components/common/blocknoteTheme.ts
+++ b/components/common/blocknoteTheme.ts
@@ -1,35 +1,35 @@
 import type { Theme } from '@blocknote/mantine'
 
-// Grace アプリのカラー定義（ライト/ダークモード対応）
+// Grace アプリのカラー定義（ライト/ダークモード対応、zinc パレット準拠）
 const lightTheme: Theme = {
   colors: {
     editor: {
-      text: '#0f141a', // neutral-950
+      text: '#09090b', // zinc-950
       background: 'transparent',
     },
     menu: {
-      text: '#0f141a',
+      text: '#09090b',
       background: '#ffffff',
     },
     tooltip: {
       text: '#ffffff',
-      background: '#0f141a',
+      background: '#09090b',
     },
     hovered: {
-      text: '#0f141a',
-      background: '#f6f6f9', // neutral-150
+      text: '#09090b',
+      background: '#f4f4f5', // zinc-100
     },
     selected: {
-      text: '#0f141a',
-      background: '#ebebf0', // neutral-250
+      text: '#09090b',
+      background: '#e4e4e7', // zinc-200
     },
     disabled: {
-      text: '#9ba7b6', // neutral-500
-      background: '#f6f6f9',
+      text: '#71717a', // zinc-500
+      background: '#f4f4f5',
     },
     shadow: 'rgba(0, 0, 0, 0.12)',
-    border: '#c6c6cd', // neutral-350
-    sideMenu: '#9ba7b6',
+    border: '#e4e4e7', // zinc-200
+    sideMenu: '#a1a1aa', // zinc-400
   },
   borderRadius: 8,
   fontFamily: '"Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif',
@@ -38,32 +38,32 @@ const lightTheme: Theme = {
 const darkTheme: Theme = {
   colors: {
     editor: {
-      text: '#c6c6cd', // neutral-350
+      text: '#d4d4d8', // zinc-300
       background: 'transparent',
     },
     menu: {
-      text: '#c6c6cd',
-      background: '#161d26', // neutral-850
+      text: '#d4d4d8',
+      background: '#18181b', // zinc-900
     },
     tooltip: {
-      text: '#0f141a',
-      background: '#c6c6cd',
+      text: '#18181b',
+      background: '#d4d4d8',
     },
     hovered: {
-      text: '#c6c6cd',
-      background: '#1a2535',
+      text: '#d4d4d8',
+      background: '#27272a', // zinc-800
     },
     selected: {
-      text: '#c6c6cd',
-      background: '#354150',
+      text: '#f4f4f5',
+      background: '#3f3f46', // zinc-700
     },
     disabled: {
-      text: '#5f6b7a',
-      background: '#1a2535',
+      text: '#71717a', // zinc-500
+      background: '#27272a',
     },
     shadow: 'rgba(0, 0, 0, 0.4)',
-    border: '#414d5c',
-    sideMenu: '#5f6b7a',
+    border: '#3f3f46', // zinc-700
+    sideMenu: '#71717a',
   },
   borderRadius: 8,
   fontFamily: '"Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif',
diff --git a/components/layout/AppShell.tsx b/components/layout/AppShell.tsx
index 892db14..e7387a7 100644
--- a/components/layout/AppShell.tsx
+++ b/components/layout/AppShell.tsx
@@ -206,7 +206,7 @@ export default function AppShell({
       >
         {sidebarOpen ? (
           <>
-            <div className="flex items-center justify-between px-4 py-3">
+            <div className="flex h-12 shrink-0 items-center justify-between px-4">
               <Link
                 href="/dashboard"
                 className="text-lg font-bold hover:opacity-80"
@@ -226,7 +226,7 @@ export default function AppShell({
           </>
         ) : (
           <>
-            <div className="flex items-center justify-center py-3">
+            <div className="flex h-12 shrink-0 items-center justify-center">
               <Button
                 variant="ghost"
                 size="icon-sm"
@@ -272,7 +272,7 @@ export default function AppShell({
               boxShadow: '0 0 16px rgba(0, 0, 0, 0.15)',
             }}
           >
-            <div className="flex items-center justify-between px-4 py-3">
+            <div className="flex h-12 shrink-0 items-center justify-between px-4">
               <span className="text-lg font-bold">Grace</span>
               <Button
                 variant="ghost"
diff --git a/components/ui/table.tsx b/components/ui/table.tsx
index dd3a901..b9593e1 100644
--- a/components/ui/table.tsx
+++ b/components/ui/table.tsx
@@ -23,7 +23,10 @@ function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
   return (
     <thead
       data-slot="table-header"
-      className={cn('sticky top-0 z-10 bg-card [&_tr]:border-b', className)}
+      className={cn(
+        'sticky top-0 z-10 bg-table-header [&_tr]:border-b',
+        className,
+      )}
       {...props}
     />
   )
@@ -70,7 +73,7 @@ function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
     <th
       data-slot="table-head"
       className={cn(
-        'h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+        'h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-table-header-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
         className,
       )}
       {...props}