feat(KB-656): add autoExpand prop to QuickEntryBox and disable in list view

- Add autoExpand prop to QuickEntryBox component (defaults to true)
- Disable auto-expand in list view to reduce visual clutter
- Add tests for autoExpand={false} behavior
- Add changeset for the quick entry auto-expand change
- Fix duplicate variable in QuickEntryBox component
- Remove unused imports from useTasks hook
This commit is contained in:
gsxdsm
2026-03-31 22:55:40 -07:00
parent 661658944f
commit f1f654eb11
4 changed files with 27 additions and 3 deletions

View File

@@ -724,6 +724,7 @@ export function ListView({
availableModels={availableModels}
onPlanningMode={onPlanningMode}
onSubtaskBreakdown={onSubtaskBreakdown}
autoExpand={false}
/>
</div>
{filteredCount === 0 ? (

View File

@@ -22,6 +22,11 @@ interface QuickEntryBoxProps {
* Called when the user clicks the "Subtask" button to trigger subtask breakdown.
*/
onSubtaskBreakdown?: (description: string) => void;
/**
* When false, the component will not auto-expand on focus.
* Defaults to true for backward compatibility.
*/
autoExpand?: boolean;
}
function getModelSelectionValue(provider?: string, modelId?: string): string {
@@ -44,7 +49,7 @@ function parseModelSelection(value: string): { provider?: string; modelId?: stri
};
}
export function QuickEntryBox({ onCreate, addToast, tasks = [], availableModels, onPlanningMode, onSubtaskBreakdown }: QuickEntryBoxProps) {
export function QuickEntryBox({ onCreate, addToast, tasks = [], availableModels, onPlanningMode, onSubtaskBreakdown, autoExpand = true }: QuickEntryBoxProps) {
const [description, setDescription] = useState(() => {
if (typeof window !== "undefined") {
return localStorage.getItem(STORAGE_KEY) || "";
@@ -309,8 +314,11 @@ export function QuickEntryBox({ onCreate, addToast, tasks = [], availableModels,
justResetRef.current = false;
return;
}
setIsExpanded(true);
}, []);
// Only auto-expand if autoExpand prop is true (defaults to true for backward compatibility)
if (autoExpand) {
setIsExpanded(true);
}
}, [autoExpand]);
const handleBlur = useCallback(() => {
// Clear any existing timeout

View File

@@ -174,6 +174,16 @@ describe("QuickEntryBox", () => {
expect(textarea.classList.contains("quick-entry-input--expanded")).toBe(true);
});
it("does not expand on focus when autoExpand is false", () => {
renderQuickEntryBox({ autoExpand: false });
const textarea = screen.getByTestId("quick-entry-input");
fireEvent.focus(textarea);
// Should not expand when autoExpand is false
expect(textarea.classList.contains("quick-entry-input--expanded")).toBe(false);
});
it("collapses on blur when empty", async () => {
renderQuickEntryBox();
const textarea = screen.getByTestId("quick-entry-input");