feat(KB-177): restructure ListView with dedicated create area
- Move QuickEntryBox from NewTaskModal to ListView create area - Add list-create-area CSS styling for new layout - Update ListView tests for new component structure - Remove unused binary/fn renaming code from core package - Clean up NewTaskModal and remove obsolete tests
This commit is contained in:
@@ -390,14 +390,6 @@ export function ListView({
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="list-quick-entry">
|
||||
<QuickEntryBox
|
||||
onCreate={onQuickCreate ?? (async () => addToast("Task creation not available", "error"))}
|
||||
addToast={addToast}
|
||||
tasks={tasks}
|
||||
availableModels={availableModels}
|
||||
/>
|
||||
</div>
|
||||
<div className="list-column-toggle" ref={columnDropdownRef}>
|
||||
<button
|
||||
className="btn btn-sm"
|
||||
@@ -467,6 +459,15 @@ export function ListView({
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="list-create-area">
|
||||
<QuickEntryBox
|
||||
onCreate={onQuickCreate ?? (async () => addToast("Task creation not available", "error"))}
|
||||
addToast={addToast}
|
||||
tasks={tasks}
|
||||
availableModels={availableModels}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="list-drop-zones">
|
||||
{COLUMNS.map((column) => {
|
||||
const totalCount = tasks.filter((t) => t.column === column).length;
|
||||
|
||||
@@ -1331,6 +1331,48 @@ describe("ListView Quick Entry", () => {
|
||||
expect(input).toBeDefined();
|
||||
});
|
||||
|
||||
it("renders QuickEntryBox in list-create-area, not in toolbar", () => {
|
||||
const mockOnQuickCreate = vi.fn().mockResolvedValue(undefined);
|
||||
renderListView({ onQuickCreate: mockOnQuickCreate });
|
||||
|
||||
const quickEntry = screen.getByTestId("quick-entry-box");
|
||||
const toolbar = document.querySelector(".list-toolbar");
|
||||
const createArea = document.querySelector(".list-create-area");
|
||||
|
||||
// QuickEntryBox should not be inside toolbar
|
||||
expect(toolbar?.contains(quickEntry)).toBe(false);
|
||||
// QuickEntryBox should be inside create-area
|
||||
expect(createArea?.contains(quickEntry)).toBe(true);
|
||||
});
|
||||
|
||||
it("shows model selector button when QuickEntryBox is expanded", async () => {
|
||||
const mockOnQuickCreate = vi.fn().mockResolvedValue(undefined);
|
||||
renderListView({ onQuickCreate: mockOnQuickCreate });
|
||||
|
||||
const input = screen.getByTestId("quick-entry-input");
|
||||
|
||||
// Focus the input to expand the QuickEntryBox
|
||||
fireEvent.focus(input);
|
||||
|
||||
// Model selector button should be visible
|
||||
const modelButton = await screen.findByTestId("quick-entry-models-button");
|
||||
expect(modelButton).toBeDefined();
|
||||
});
|
||||
|
||||
it("shows dependency selector button when QuickEntryBox is expanded", async () => {
|
||||
const mockOnQuickCreate = vi.fn().mockResolvedValue(undefined);
|
||||
renderListView({ onQuickCreate: mockOnQuickCreate });
|
||||
|
||||
const input = screen.getByTestId("quick-entry-input");
|
||||
|
||||
// Focus the input to expand the QuickEntryBox
|
||||
fireEvent.focus(input);
|
||||
|
||||
// Dependency selector button should be visible
|
||||
const depsButton = await screen.findByTestId("quick-entry-deps-button");
|
||||
expect(depsButton).toBeDefined();
|
||||
});
|
||||
|
||||
it("calls onQuickCreate with description when Enter is pressed", async () => {
|
||||
const mockOnQuickCreate = vi.fn().mockResolvedValue(undefined);
|
||||
renderListView({ onQuickCreate: mockOnQuickCreate });
|
||||
|
||||
@@ -3226,13 +3226,16 @@ body {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.list-quick-entry {
|
||||
flex-shrink: 0;
|
||||
.list-create-area {
|
||||
width: 100%;
|
||||
padding: var(--space-md) var(--space-xl);
|
||||
background: var(--surface);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.list-quick-entry .quick-entry-box {
|
||||
margin-bottom: 0;
|
||||
padding: 4px 8px;
|
||||
.list-create-area .quick-entry-box {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.list-column-dropdown {
|
||||
@@ -3692,6 +3695,10 @@ body {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.list-create-area {
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
}
|
||||
|
||||
.list-filter {
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
|
||||
Reference in New Issue
Block a user