lashman/openpylon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

feat: apply board color to TopBar border and column header accents

Browse Source
This commit is contained in:
Your Name
2026-02-15 20:26:51 +02:00
parent 27246d70f2
commit 16ea05cfe0
3 changed files with 11 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/board/ColumnHeader.tsx
View File

@@ -17,9 +17,10 @@ import type { Column, ColumnWidth } from "@/types/board";
interface ColumnHeaderProps { interface ColumnHeaderProps {
column: Column; column: Column;
cardCount: number; cardCount: number;
boardColor?: string;
} }
export function ColumnHeader({ column, cardCount }: ColumnHeaderProps) { export function ColumnHeader({ column, cardCount, boardColor }: ColumnHeaderProps) {
const [editing, setEditing] = useState(false); const [editing, setEditing] = useState(false);
const [editValue, setEditValue] = useState(column.title); const [editValue, setEditValue] = useState(column.title);
const inputRef = useRef<HTMLInputElement>(null); const inputRef = useRef<HTMLInputElement>(null);
@@ -59,7 +60,7 @@ export function ColumnHeader({ column, cardCount }: ColumnHeaderProps) {
} }
return ( 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"> <div className="flex items-center gap-2 overflow-hidden">
{editing ? ( {editing ? (
<input <input

2
src/components/board/KanbanColumn.tsx
View File

@@ -75,7 +75,7 @@ export function KanbanColumn({ column, onCardClick }: KanbanColumnProps) {
> >
{/* The column header is the drag handle for column reordering */} {/* The column header is the drag handle for column reordering */}
<div {...listeners}> <div {...listeners}>
<ColumnHeader column={column} cardCount={column.cardIds.length} /> <ColumnHeader column={column} cardCount={column.cardIds.length} boardColor={board?.color} />
</div> </div>
{/* Card list - wrapped in SortableContext for within-column sorting */} {/* Card list - wrapped in SortableContext for within-column sorting */}

9
src/components/layout/TopBar.tsx
View File

@@ -65,7 +65,8 @@ export function TopBar() {
return ( return (
<header <header
data-tauri-drag-region 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 */} {/* Left section */}
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
@@ -105,8 +106,12 @@ export function TopBar() {
) : ( ) : (
<button <button
onClick={startEditing} 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} {board.title}
</button> </button>
) )