81b37530e3
- src/components/Board.jsx: prop-driven, owns single DnD context (PointerSensor 5px activation distance, KeyboardSensor, closestCorners). Wires all sortable lists + cards. Drops P3's store-coupled Board in favour of P4's prop-driven List pattern + P2's canonical store. - src/components/List.jsx: prop-driven, wraps cards in SortableContext via SortableCard helper for vertical DnD. - src/components/ListHeader.jsx: rewritten as prop-driven. - src/components/Card.jsx, CardDetailModal.jsx: P4 verbatim. - src/lib/boardDnd.js: P5 reducer + ID helpers. - src/store/boardStore.js: extended addBoard/addList/addCard to return new ids (computed from post-action state) so callers (Sidebar) can select the new entity immediately. - src/components/AppShell.jsx, Sidebar.jsx, TopBar.jsx, EmptyState.jsx: P6 verbatim (stateless, prop-driven). - src/App.jsx: new shell per spec — Sidebar + board area with FirstRunEmptyState / SelectBoardEmptyState / TopBar+Board. - src/test/testUtils.jsx: renderWithStore helper that pre-seeds localStorage so useBoardStore's initializer picks up test state. - src/index.css: fresh global resets. - Deleted: TodoForm/TodoList/TodoItem (legacy flat-todo), useLocalStorage (replaced by useBoardStore), old App.css. - Added: __fixtures__/DnDFixtureBoard.jsx (P5 DnD fixture for tests).
105 lines
1.7 KiB
CSS
105 lines
1.7 KiB
CSS
.list {
|
|
background: #ebecf0;
|
|
border-radius: 8px;
|
|
padding: 0.5rem;
|
|
width: 272px;
|
|
flex: 0 0 272px;
|
|
max-width: 300px;
|
|
min-width: 272px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-height: calc(100vh - 140px);
|
|
}
|
|
|
|
.list__cards {
|
|
flex: 1 1 auto;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
padding: 0.1rem 0.15rem 0.5rem;
|
|
margin: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.list__card-placeholder {
|
|
background: #ffffff;
|
|
border-radius: 3px;
|
|
box-shadow: 0 1px 0 rgba(9, 30, 66, 0.25);
|
|
padding: 0.5rem 0.65rem;
|
|
color: #172b4d;
|
|
font-size: 0.9rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.list__add-card {
|
|
background: transparent;
|
|
border: none;
|
|
text-align: left;
|
|
padding: 0.4rem 0.5rem;
|
|
border-radius: 3px;
|
|
color: #5e6c84;
|
|
font-size: 0.9rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.list__add-card:hover {
|
|
background: rgba(9, 30, 66, 0.08);
|
|
color: #172b4d;
|
|
}
|
|
|
|
.list__add-card-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.4rem;
|
|
padding: 0.15rem;
|
|
}
|
|
|
|
.list__add-card-textarea {
|
|
width: 100%;
|
|
min-height: 56px;
|
|
resize: vertical;
|
|
padding: 0.5rem;
|
|
border: 1px solid #0079bf;
|
|
border-radius: 3px;
|
|
font: inherit;
|
|
font-size: 0.9rem;
|
|
color: #172b4d;
|
|
outline: none;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.list__add-card-actions {
|
|
display: flex;
|
|
gap: 0.4rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.list__add-card-submit {
|
|
background: #0079bf;
|
|
color: #ffffff;
|
|
border: none;
|
|
border-radius: 3px;
|
|
padding: 0.35rem 0.75rem;
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.list__add-card-submit:hover {
|
|
background: #026aa7;
|
|
}
|
|
|
|
.list__add-card-cancel {
|
|
background: transparent;
|
|
border: none;
|
|
color: #5e6c84;
|
|
font-size: 0.9rem;
|
|
padding: 0.35rem 0.5rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.list__add-card-cancel:hover {
|
|
color: #172b4d;
|
|
}
|