feat: add board view with columns, headers, and inline card creation
This commit is contained in:
Your Name
53
src/components/board/AddCardInput.tsx
Normal file
53
src/components/board/AddCardInput.tsx
Normal file
@@ -0,0 +1,53 @@
|
||||
import { useState, useRef, useEffect } from "react";
|
||||
import { useBoardStore } from "@/stores/board-store";
|
||||
|
||||
interface AddCardInputProps {
|
||||
columnId: string;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export function AddCardInput({ columnId, onClose }: AddCardInputProps) {
|
||||
const [value, setValue] = useState("");
|
||||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||||
const addCard = useBoardStore((s) => s.addCard);
|
||||
|
||||
useEffect(() => {
|
||||
textareaRef.current?.focus();
|
||||
}, []);
|
||||
|
||||
function handleSubmit() {
|
||||
const trimmed = value.trim();
|
||||
if (trimmed) {
|
||||
addCard(columnId, trimmed);
|
||||
setValue("");
|
||||
// Keep the input open for quick multi-add
|
||||
textareaRef.current?.focus();
|
||||
}
|
||||
}
|
||||
|
||||
function handleKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>) {
|
||||
if (e.key === "Enter" && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
handleSubmit();
|
||||
} else if (e.key === "Escape") {
|
||||
onClose();
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="px-2 pb-2">
|
||||
<textarea
|
||||
ref={textareaRef}
|
||||
value={value}
|
||||
onChange={(e) => setValue(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
onBlur={() => {
|
||||
if (!value.trim()) onClose();
|
||||
}}
|
||||
placeholder="Card title..."
|
||||
rows={2}
|
||||
className="w-full resize-none rounded-lg bg-pylon-surface p-3 text-sm text-pylon-text shadow-sm outline-none placeholder:text-pylon-text-secondary focus:ring-1 focus:ring-pylon-accent"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
102
src/components/board/BoardView.tsx
Normal file
102
src/components/board/BoardView.tsx
Normal file
@@ -0,0 +1,102 @@
|
||||
import { useState, useRef, useEffect } from "react";
|
||||
import { Plus } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useBoardStore } from "@/stores/board-store";
|
||||
import { KanbanColumn } from "@/components/board/KanbanColumn";
|
||||
|
||||
export function BoardView() {
|
||||
const board = useBoardStore((s) => s.board);
|
||||
const addColumn = useBoardStore((s) => s.addColumn);
|
||||
|
||||
const [addingColumn, setAddingColumn] = useState(false);
|
||||
const [newColumnTitle, setNewColumnTitle] = useState("");
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (addingColumn && inputRef.current) {
|
||||
inputRef.current.focus();
|
||||
}
|
||||
}, [addingColumn]);
|
||||
|
||||
function handleAddColumn() {
|
||||
const trimmed = newColumnTitle.trim();
|
||||
if (trimmed) {
|
||||
addColumn(trimmed);
|
||||
setNewColumnTitle("");
|
||||
// Keep the input open for quick successive adds
|
||||
inputRef.current?.focus();
|
||||
}
|
||||
}
|
||||
|
||||
function handleKeyDown(e: React.KeyboardEvent) {
|
||||
if (e.key === "Enter") {
|
||||
handleAddColumn();
|
||||
} else if (e.key === "Escape") {
|
||||
setAddingColumn(false);
|
||||
setNewColumnTitle("");
|
||||
}
|
||||
}
|
||||
|
||||
if (!board) {
|
||||
return (
|
||||
<div className="flex h-full items-center justify-center text-pylon-text-secondary">
|
||||
<span className="font-mono text-sm">Loading board...</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex h-full gap-6 overflow-x-auto p-6">
|
||||
{board.columns.map((column) => (
|
||||
<KanbanColumn key={column.id} column={column} />
|
||||
))}
|
||||
|
||||
{/* Add column button / inline input */}
|
||||
<div className="shrink-0">
|
||||
{addingColumn ? (
|
||||
<div className="flex w-[280px] flex-col gap-2 rounded-lg bg-pylon-column p-3">
|
||||
<input
|
||||
ref={inputRef}
|
||||
value={newColumnTitle}
|
||||
onChange={(e) => setNewColumnTitle(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
onBlur={() => {
|
||||
if (!newColumnTitle.trim()) {
|
||||
setAddingColumn(false);
|
||||
}
|
||||
}}
|
||||
placeholder="Column title..."
|
||||
className="h-8 rounded-md bg-pylon-surface px-3 text-sm text-pylon-text outline-none placeholder:text-pylon-text-secondary focus:ring-1 focus:ring-pylon-accent"
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
<Button size="sm" onClick={handleAddColumn}>
|
||||
Add
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setAddingColumn(false);
|
||||
setNewColumnTitle("");
|
||||
}}
|
||||
className="text-pylon-text-secondary"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setAddingColumn(true)}
|
||||
className="h-10 w-[280px] justify-start border border-dashed border-pylon-text-secondary/30 text-pylon-text-secondary hover:border-pylon-text-secondary/60 hover:text-pylon-text"
|
||||
>
|
||||
<Plus className="size-4" />
|
||||
Add column
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
142
src/components/board/ColumnHeader.tsx
Normal file
142
src/components/board/ColumnHeader.tsx
Normal file
@@ -0,0 +1,142 @@
|
||||
import { useState, useRef, useEffect } from "react";
|
||||
import { MoreHorizontal } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuSub,
|
||||
DropdownMenuSubContent,
|
||||
DropdownMenuSubTrigger,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { useBoardStore } from "@/stores/board-store";
|
||||
import type { Column, ColumnWidth } from "@/types/board";
|
||||
|
||||
interface ColumnHeaderProps {
|
||||
column: Column;
|
||||
cardCount: number;
|
||||
}
|
||||
|
||||
export function ColumnHeader({ column, cardCount }: ColumnHeaderProps) {
|
||||
const [editing, setEditing] = useState(false);
|
||||
const [editValue, setEditValue] = useState(column.title);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const updateColumnTitle = useBoardStore((s) => s.updateColumnTitle);
|
||||
const deleteColumn = useBoardStore((s) => s.deleteColumn);
|
||||
const setColumnWidth = useBoardStore((s) => s.setColumnWidth);
|
||||
|
||||
useEffect(() => {
|
||||
if (editing && inputRef.current) {
|
||||
inputRef.current.focus();
|
||||
inputRef.current.select();
|
||||
}
|
||||
}, [editing]);
|
||||
|
||||
function commitRename() {
|
||||
const trimmed = editValue.trim();
|
||||
if (trimmed && trimmed !== column.title) {
|
||||
updateColumnTitle(column.id, trimmed);
|
||||
} else {
|
||||
setEditValue(column.title);
|
||||
}
|
||||
setEditing(false);
|
||||
}
|
||||
|
||||
function handleKeyDown(e: React.KeyboardEvent) {
|
||||
if (e.key === "Enter") {
|
||||
commitRename();
|
||||
} else if (e.key === "Escape") {
|
||||
setEditValue(column.title);
|
||||
setEditing(false);
|
||||
}
|
||||
}
|
||||
|
||||
function handleWidthChange(width: ColumnWidth) {
|
||||
setColumnWidth(column.id, width);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-between border-b border-border px-3 pb-2 pt-3">
|
||||
<div className="flex items-center gap-2 overflow-hidden">
|
||||
{editing ? (
|
||||
<input
|
||||
ref={inputRef}
|
||||
value={editValue}
|
||||
onChange={(e) => setEditValue(e.target.value)}
|
||||
onBlur={commitRename}
|
||||
onKeyDown={handleKeyDown}
|
||||
className="h-5 w-full bg-transparent font-mono text-xs font-semibold uppercase tracking-widest text-pylon-text-secondary outline-none"
|
||||
/>
|
||||
) : (
|
||||
<span
|
||||
className="cursor-default truncate font-mono text-xs font-semibold uppercase tracking-widest text-pylon-text-secondary"
|
||||
onDoubleClick={() => {
|
||||
setEditValue(column.title);
|
||||
setEditing(true);
|
||||
}}
|
||||
>
|
||||
{column.title}
|
||||
</span>
|
||||
)}
|
||||
<span className="shrink-0 font-mono text-xs text-pylon-text-secondary">
|
||||
{cardCount}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-xs"
|
||||
className="shrink-0 text-pylon-text-secondary opacity-0 transition-opacity group-hover/column:opacity-100 hover:text-pylon-text"
|
||||
>
|
||||
<MoreHorizontal className="size-3.5" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem
|
||||
onClick={() => {
|
||||
setEditValue(column.title);
|
||||
setEditing(true);
|
||||
}}
|
||||
>
|
||||
Rename
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSub>
|
||||
<DropdownMenuSubTrigger>Width</DropdownMenuSubTrigger>
|
||||
<DropdownMenuSubContent>
|
||||
<DropdownMenuItem onClick={() => handleWidthChange("narrow")}>
|
||||
Narrow
|
||||
{column.width === "narrow" && (
|
||||
<span className="ml-auto text-pylon-accent">*</span>
|
||||
)}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => handleWidthChange("standard")}>
|
||||
Standard
|
||||
{column.width === "standard" && (
|
||||
<span className="ml-auto text-pylon-accent">*</span>
|
||||
)}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => handleWidthChange("wide")}>
|
||||
Wide
|
||||
{column.width === "wide" && (
|
||||
<span className="ml-auto text-pylon-accent">*</span>
|
||||
)}
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuSubContent>
|
||||
</DropdownMenuSub>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
variant="destructive"
|
||||
onClick={() => deleteColumn(column.id)}
|
||||
>
|
||||
Delete
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
72
src/components/board/KanbanColumn.tsx
Normal file
72
src/components/board/KanbanColumn.tsx
Normal file
@@ -0,0 +1,72 @@
|
||||
import { useState } from "react";
|
||||
import { Plus } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { ColumnHeader } from "@/components/board/ColumnHeader";
|
||||
import { AddCardInput } from "@/components/board/AddCardInput";
|
||||
import { CardThumbnail } from "@/components/board/CardThumbnail";
|
||||
import { useBoardStore } from "@/stores/board-store";
|
||||
import type { Column } from "@/types/board";
|
||||
|
||||
const WIDTH_MAP = {
|
||||
narrow: 180,
|
||||
standard: 280,
|
||||
wide: 360,
|
||||
} as const;
|
||||
|
||||
interface KanbanColumnProps {
|
||||
column: Column;
|
||||
}
|
||||
|
||||
export function KanbanColumn({ column }: KanbanColumnProps) {
|
||||
const [showAddCard, setShowAddCard] = useState(false);
|
||||
const board = useBoardStore((s) => s.board);
|
||||
|
||||
const width = WIDTH_MAP[column.width];
|
||||
|
||||
return (
|
||||
<div
|
||||
className="group/column flex shrink-0 flex-col rounded-lg bg-pylon-column"
|
||||
style={{ width }}
|
||||
>
|
||||
<ColumnHeader column={column} cardCount={column.cardIds.length} />
|
||||
|
||||
{/* Card list */}
|
||||
<ScrollArea className="flex-1 overflow-y-auto">
|
||||
<div className="flex flex-col gap-2 p-2">
|
||||
{column.cardIds.map((cardId) => {
|
||||
const card = board?.cards[cardId];
|
||||
if (!card) return null;
|
||||
return (
|
||||
<CardThumbnail
|
||||
key={cardId}
|
||||
card={card}
|
||||
boardLabels={board?.labels ?? []}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
|
||||
{/* Add card section */}
|
||||
{showAddCard ? (
|
||||
<AddCardInput
|
||||
columnId={column.id}
|
||||
onClose={() => setShowAddCard(false)}
|
||||
/>
|
||||
) : (
|
||||
<div className="p-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setShowAddCard(true)}
|
||||
className="w-full justify-start text-pylon-text-secondary hover:text-pylon-text"
|
||||
>
|
||||
<Plus className="size-4" />
|
||||
Add card
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user