From f303d616776f52b27a5d3ff6660e42c9c2acf869 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Sun, 15 Feb 2026 20:26:51 +0200
Subject: [PATCH] feat: apply board color to TopBar border and column header
 accents

---
 src/components/board/ColumnHeader.tsx | 5 +++--
 src/components/board/KanbanColumn.tsx | 2 +-
 src/components/layout/TopBar.tsx      | 9 +++++++--
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/board/ColumnHeader.tsx b/src/components/board/ColumnHeader.tsx
index 4205263..c935709 100644
--- a/src/components/board/ColumnHeader.tsx
+++ b/src/components/board/ColumnHeader.tsx
@@ -17,9 +17,10 @@ import type { Column, ColumnWidth } from "@/types/board";
 interface ColumnHeaderProps {
   column: Column;
   cardCount: number;
+  boardColor?: string;
 }
 
-export function ColumnHeader({ column, cardCount }: ColumnHeaderProps) {
+export function ColumnHeader({ column, cardCount, boardColor }: ColumnHeaderProps) {
   const [editing, setEditing] = useState(false);
   const [editValue, setEditValue] = useState(column.title);
   const inputRef = useRef<HTMLInputElement>(null);
@@ -59,7 +60,7 @@ export function ColumnHeader({ column, cardCount }: ColumnHeaderProps) {
   }
 
   return (
-    <div className="flex items-center justify-between border-b border-border px-3 pb-2 pt-3">
+    <div className="flex items-center justify-between border-b border-border px-3 pb-2 pt-3" style={{ borderTop: boardColor ? `3px solid ${boardColor}30` : undefined }}>
       <div className="flex items-center gap-2 overflow-hidden">
         {editing ? (
           <input
diff --git a/src/components/board/KanbanColumn.tsx b/src/components/board/KanbanColumn.tsx
index e60c2ed..5b158b1 100644
--- a/src/components/board/KanbanColumn.tsx
+++ b/src/components/board/KanbanColumn.tsx
@@ -75,7 +75,7 @@ export function KanbanColumn({ column, onCardClick }: KanbanColumnProps) {
     >
       {/* The column header is the drag handle for column reordering */}
       <div {...listeners}>
-        <ColumnHeader column={column} cardCount={column.cardIds.length} />
+        <ColumnHeader column={column} cardCount={column.cardIds.length} boardColor={board?.color} />
       </div>
 
       {/* Card list - wrapped in SortableContext for within-column sorting */}
diff --git a/src/components/layout/TopBar.tsx b/src/components/layout/TopBar.tsx
index 43c6ff6..838b000 100644
--- a/src/components/layout/TopBar.tsx
+++ b/src/components/layout/TopBar.tsx
@@ -65,7 +65,8 @@ export function TopBar() {
   return (
     <header
       data-tauri-drag-region
-      className="flex h-12 shrink-0 items-center gap-2 border-b border-border bg-pylon-surface px-3"
+      className="flex h-12 shrink-0 items-center gap-2 bg-pylon-surface px-3"
+      style={{ borderBottom: isBoardView && board ? `2px solid ${board.color}` : '1px solid var(--border)' }}
     >
       {/* Left section */}
       <div className="flex items-center gap-2">
@@ -105,8 +106,12 @@ export function TopBar() {
           ) : (
             <button
               onClick={startEditing}
-              className="rounded-md px-2 py-0.5 font-heading text-lg text-pylon-text hover:bg-pylon-column transition-colors"
+              className="flex items-center gap-1.5 rounded-md px-2 py-0.5 font-heading text-lg text-pylon-text hover:bg-pylon-column transition-colors"
             >
+              <span
+                className="inline-block size-2.5 rounded-full shrink-0"
+                style={{ backgroundColor: board.color }}
+              />
               {board.title}
             </button>
           )