root/fusion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(FN-671): complete mobile header layout and QuickEntryBox improvements

Browse Source 
- Add project selector component with search and dropdown UI
- Add Task Changes tab styles for viewing diffs in task detail
- Implement QuickEntryBox disclosure pattern with collapsible controls panel
- Move Usage and Activity Log buttons to mobile overflow menu
- Add disclosure preference persistence via localStorage
- Complete legacy comment migration for unified comments system
- Update QuickEntryBox tests for disclosure behavior
This commit is contained in:
gsxdsm
2026-04-02 09:18:16 -07:00
parent 566f531361
commit b05fbb7ecb
5 changed files with 739 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
packages/dashboard/app/components/Header.tsx
View File

@@ -551,6 +551,24 @@ export function Header({
<Clock size={16} />
<span>Scheduled Tasks</span>
</button>
<button
className="mobile-overflow-item"
onClick={() => handleOverflowAction(onToggleTerminal)}
role="menuitem"
data-testid="overflow-terminal-btn"
>
<Terminal size={16} />
<span>Open Terminal</span>
</button>
<button
className="mobile-overflow-item"
onClick={() => handleOverflowAction(onOpenSchedules)}
role="menuitem"
data-testid="overflow-schedules-btn"
>
<Clock size={16} />
<span>Scheduled Tasks</span>
</button>
<button
className="mobile-overflow-item"
onClick={() => handleOverflowAction(onOpenSettings)}

47
packages/dashboard/app/components/QuickEntryBox.tsx
View File

@@ -9,6 +9,7 @@ import { CustomModelDropdown } from "./CustomModelDropdown";
import { ModelSelectionModal } from "./ModelSelectionModal";
const STORAGE_KEY = "kb-quick-entry-text";
const DISCLOSURE_STORAGE_KEY = "kb-quick-entry-expanded";
interface QuickEntryBoxProps {
onCreate?: (input: TaskCreateInput) => Promise<void>;
@@ -53,7 +54,17 @@ export function QuickEntryBox({ onCreate, addToast, tasks = [], availableModels,
return "";
});
const [isSubmitting, setIsSubmitting] = useState(false);
// isExpanded controls textarea height styling (auto-resize)
const [isExpanded, setIsExpanded] = useState(false);
// isDisclosureExpanded controls visibility of the controls panel (Deps, Models, etc.)
const [isDisclosureExpanded, setIsDisclosureExpanded] = useState(() => {
if (typeof window !== "undefined") {
const saved = localStorage.getItem(DISCLOSURE_STORAGE_KEY);
// Default to true (expanded) for backward compatibility - only collapse if explicitly set to "false"
return saved !== "false";
}
return true;
});
const textareaRef = useRef<HTMLTextAreaElement>(null);
const justResetRef = useRef(false);
@@ -137,6 +148,13 @@ export function QuickEntryBox({ onCreate, addToast, tasks = [], availableModels,
}
}, [description]);
// Persist disclosure state to localStorage whenever it changes
useEffect(() => {
if (typeof window !== "undefined") {
localStorage.setItem(DISCLOSURE_STORAGE_KEY, isDisclosureExpanded.toString());
}
}, [isDisclosureExpanded]);
// Cleanup on unmount
useEffect(() => {
return () => {
@@ -204,7 +222,8 @@ export function QuickEntryBox({ onCreate, addToast, tasks = [], availableModels,
setIsModelModalOpen(false);
setIsRefineMenuOpen(false);
setIsRefining(false);
setIsExpanded(false);
setIsExpanded(false); // Collapse textarea height on reset
// Note: isDisclosureExpanded is NOT reset - user preference persists
justResetRef.current = true;
if (textareaRef.current) {
textareaRef.current.style.height = "auto";
@@ -290,12 +309,21 @@ export function QuickEntryBox({ onCreate, addToast, tasks = [], availableModels,
localStorage.removeItem(STORAGE_KEY);
}
}
// Collapse on escape
// Collapse textarea and disclosure on escape
setIsExpanded(false);
setIsDisclosureExpanded(false);
textareaRef.current?.blur();
}
},
[handleSubmit, description, isExpanded, showDeps, isModelModalOpen, isRefineMenuOpen],
[
handleSubmit,
description,
isExpanded,
showDeps,
isModelModalOpen,
isRefineMenuOpen,
setIsDisclosureExpanded,
],
);
const handleBlur = useCallback(() => {
@@ -428,15 +456,16 @@ export function QuickEntryBox({ onCreate, addToast, tasks = [], availableModels,
}
}, [availableModels]);
// Show expanded controls only when manually expanded (isExpanded)
const showExpandedControls = isExpanded;
// Show expanded controls based on disclosure state (user preference), not textarea focus
const showExpandedControls = isDisclosureExpanded;
const toggleExpanded = useCallback(() => {
setIsDisclosureExpanded((prev) => !prev);
setIsExpanded((prev) => !prev);
}, []);
return (
<div className={`quick-entry-box ${isExpanded ? "quick-entry-box--expanded" : "quick-entry-box--collapsed"}`} data-testid="quick-entry-box">
<div className={`quick-entry-box ${isDisclosureExpanded ? "quick-entry-box--expanded" : "quick-entry-box--collapsed"}`} data-testid="quick-entry-box">
<div className="quick-entry-main-row">
<textarea
ref={textareaRef}
@@ -456,12 +485,12 @@ export function QuickEntryBox({ onCreate, addToast, tasks = [], availableModels,
type="button"
className="btn btn-sm quick-entry-toggle"
onClick={toggleExpanded}
aria-expanded={isExpanded}
aria-expanded={isDisclosureExpanded}
aria-controls="quick-entry-controls"
data-testid="quick-entry-toggle"
title={isExpanded ? "Collapse" : "Expand"}
title={isDisclosureExpanded ? "Collapse" : "Expand"}
>
{isExpanded ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
{isDisclosureExpanded ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
</button>
</div>
<div

265
packages/dashboard/app/components/__tests__/QuickEntryBox.test.tsx
View File

@@ -138,7 +138,11 @@ vi.mock("../ModelSelectionModal", () => ({
},
}));
function renderQuickEntryBox(props = {}) {
function renderQuickEntryBox(props = {}, { startCollapsed = false } = {}) {
// Set disclosure state if needed
if (startCollapsed) {
localStorage.setItem("kb-quick-entry-expanded", "false");
}
const defaultProps = {
onCreate: vi.fn().mockResolvedValue(undefined),
addToast: vi.fn(),
@@ -158,15 +162,18 @@ function expandQuickEntry() {
describe("QuickEntryBox", () => {
beforeEach(() => {
vi.useFakeTimers({ shouldAdvanceTime: true });
localStorage.clear();
});
afterEach(() => {
vi.runOnlyPendingTimers();
vi.useRealTimers();
localStorage.clear();
});
it("renders textarea with placeholder", () => {
renderQuickEntryBox();
renderQuickEntryBox({}, { startCollapsed: true });
// Component starts with disclosure expanded by default
const textarea = screen.getByTestId("quick-entry-input");
expect(textarea).toBeTruthy();
expect(textarea.tagName.toLowerCase()).toBe("textarea");
@@ -174,7 +181,8 @@ describe("QuickEntryBox", () => {
});
it("does NOT expand on focus", () => {
renderQuickEntryBox();
renderQuickEntryBox({}, { startCollapsed: true });
// Component starts with disclosure expanded by default
const textarea = screen.getByTestId("quick-entry-input");
fireEvent.focus(textarea);
@@ -184,7 +192,8 @@ describe("QuickEntryBox", () => {
});
it("toggle button expands the view", () => {
renderQuickEntryBox();
renderQuickEntryBox({}, { startCollapsed: true });
// Component starts with disclosure expanded by default
const textarea = screen.getByTestId("quick-entry-input");
const toggleButton = screen.getByTestId("quick-entry-toggle");
const controls = document.getElementById("quick-entry-controls");
@@ -209,7 +218,8 @@ describe("QuickEntryBox", () => {
});
it("toggle button collapses the view when expanded", () => {
renderQuickEntryBox();
renderQuickEntryBox({}, { startCollapsed: true });
// Component starts with disclosure expanded by default
const textarea = screen.getByTestId("quick-entry-input");
const box = screen.getByTestId("quick-entry-box");
@@ -242,7 +252,8 @@ describe("QuickEntryBox", () => {
});
it("does NOT collapse on blur when empty", async () => {
renderQuickEntryBox();
renderQuickEntryBox({}, { startCollapsed: true });
// Component starts with disclosure expanded by default
const textarea = screen.getByTestId("quick-entry-input");
// Expand manually
@@ -261,7 +272,8 @@ describe("QuickEntryBox", () => {
});
it("does NOT collapse on blur when has content", async () => {
renderQuickEntryBox();
renderQuickEntryBox({}, { startCollapsed: true });
// Component starts with disclosure expanded by default
const textarea = screen.getByTestId("quick-entry-input");
// Expand manually and add content
@@ -280,7 +292,8 @@ describe("QuickEntryBox", () => {
});
it("creates task on Enter key with TaskCreateInput", async () => {
const { props } = renderQuickEntryBox();
const { props } = renderQuickEntryBox({}, { startCollapsed: true });
// Component starts with disclosure expanded by default
const textarea = screen.getByTestId("quick-entry-input");
fireEvent.change(textarea, { target: { value: "New task description" } });
@@ -297,7 +310,8 @@ describe("QuickEntryBox", () => {
});
it("allows Shift+Enter to insert newline when expanded", () => {
renderQuickEntryBox();
renderQuickEntryBox({}, { startCollapsed: true });
// Component starts with disclosure expanded by default
expandQuickEntry();
const textarea = screen.getByTestId("quick-entry-input");
@@ -311,7 +325,8 @@ describe("QuickEntryBox", () => {
});
it("submits on Enter even when expanded (without Shift)", async () => {
const { props } = renderQuickEntryBox();
const { props } = renderQuickEntryBox({}, { startCollapsed: true });
// Component starts with disclosure expanded by default
const textarea = screen.getByTestId("quick-entry-input");
fireEvent.focus(textarea);
@@ -330,7 +345,8 @@ describe("QuickEntryBox", () => {
});
it("prevents default on Enter key (without Shift)", () => {
renderQuickEntryBox();
renderQuickEntryBox({}, { startCollapsed: true });
// Component starts with disclosure expanded by default
const textarea = screen.getByTestId("quick-entry-input");
fireEvent.change(textarea, { target: { value: "Task" } });
@@ -341,7 +357,8 @@ describe("QuickEntryBox", () => {
});
it("shows loading state during creation", async () => {
const { props } = renderQuickEntryBox();
const { props } = renderQuickEntryBox({}, { startCollapsed: true });
// Component starts with disclosure expanded by default
// Slow down the promise to see loading state
props.onCreate.mockImplementation(() => new Promise((resolve) => setTimeout(resolve, 100)));
@@ -359,7 +376,8 @@ describe("QuickEntryBox", () => {
});
it("clears input after successful creation", async () => {
const { props } = renderQuickEntryBox();
const { props } = renderQuickEntryBox({}, { startCollapsed: true });
// Component starts with disclosure expanded by default
const textarea = screen.getByTestId("quick-entry-input");
fireEvent.change(textarea, { target: { value: "Task to create" } });
@@ -373,7 +391,8 @@ describe("QuickEntryBox", () => {
});
it("shows error toast on failure and keeps input content", async () => {
const { props } = renderQuickEntryBox();
const { props } = renderQuickEntryBox({}, { startCollapsed: true });
// Component starts with disclosure expanded by default
props.onCreate.mockRejectedValue(new Error("Network error"));
const textarea = screen.getByTestId("quick-entry-input");
@@ -389,7 +408,8 @@ describe("QuickEntryBox", () => {
});
it("clears non-empty input on Escape key", () => {
renderQuickEntryBox();
renderQuickEntryBox({}, { startCollapsed: true });
// Component starts with disclosure expanded by default
const textarea = screen.getByTestId("quick-entry-input");
fireEvent.change(textarea, { target: { value: "Some text" } });
@@ -400,7 +420,8 @@ describe("QuickEntryBox", () => {
});
it("collapses and blurs on Escape key", () => {
renderQuickEntryBox();
renderQuickEntryBox({}, { startCollapsed: true });
// Component starts with disclosure expanded by default
expandQuickEntry();
const textarea = screen.getByTestId("quick-entry-input");
@@ -412,7 +433,8 @@ describe("QuickEntryBox", () => {
});
it("does not clear empty input on Escape key", () => {
renderQuickEntryBox();
renderQuickEntryBox({}, { startCollapsed: true });
// Component starts with disclosure expanded by default
const textarea = screen.getByTestId("quick-entry-input");
fireEvent.keyDown(textarea, { key: "Escape" });
@@ -420,7 +442,8 @@ describe("QuickEntryBox", () => {
});
it("does not submit on Enter if input is empty", async () => {
const { props } = renderQuickEntryBox();
const { props } = renderQuickEntryBox({}, { startCollapsed: true });
// Component starts with disclosure expanded by default
const textarea = screen.getByTestId("quick-entry-input");
fireEvent.keyDown(textarea, { key: "Enter" });
@@ -432,7 +455,8 @@ describe("QuickEntryBox", () => {
});
it("does not submit on Enter if input is only whitespace", async () => {
const { props } = renderQuickEntryBox();
const { props } = renderQuickEntryBox({}, { startCollapsed: true });
// Component starts with disclosure expanded by default
const textarea = screen.getByTestId("quick-entry-input");
fireEvent.change(textarea, { target: { value: " " } });
@@ -444,7 +468,8 @@ describe("QuickEntryBox", () => {
});
it("updates textarea value on change", () => {
renderQuickEntryBox();
renderQuickEntryBox({}, { startCollapsed: true });
// Component starts with disclosure expanded by default
const textarea = screen.getByTestId("quick-entry-input");
fireEvent.change(textarea, { target: { value: "Updated text" } });
@@ -452,7 +477,8 @@ describe("QuickEntryBox", () => {
});
it("trims whitespace when creating task", async () => {
const { props } = renderQuickEntryBox();
const { props } = renderQuickEntryBox({}, { startCollapsed: true });
// Component starts with disclosure expanded by default
const textarea = screen.getByTestId("quick-entry-input");
fireEvent.change(textarea, { target: { value: " Task with spaces " } });
@@ -468,7 +494,8 @@ describe("QuickEntryBox", () => {
});
it("maintains focus after successful creation", async () => {
const { props } = renderQuickEntryBox();
const { props } = renderQuickEntryBox({}, { startCollapsed: true });
// Component starts with disclosure expanded by default
const textarea = screen.getByTestId("quick-entry-input");
fireEvent.change(textarea, { target: { value: "Task to create" } });
@@ -484,7 +511,7 @@ describe("QuickEntryBox", () => {
describe("Rich creation features", () => {
it("shows dependency button when expanded", () => {
renderQuickEntryBox();
renderQuickEntryBox({}, { startCollapsed: true });
// Initially, controls region is collapsed/hidden
expect(document.getElementById("quick-entry-controls")?.hasAttribute("hidden")).toBe(true);
@@ -499,7 +526,7 @@ describe("QuickEntryBox", () => {
});
it("shows model selector button when expanded", () => {
renderQuickEntryBox();
renderQuickEntryBox({}, { startCollapsed: true });
// Initially, controls region is collapsed/hidden
expect(document.getElementById("quick-entry-controls")?.hasAttribute("hidden")).toBe(true);
@@ -514,7 +541,7 @@ describe("QuickEntryBox", () => {
});
it("shows Plan and Subtask buttons when expanded", () => {
renderQuickEntryBox();
renderQuickEntryBox({}, { startCollapsed: true });
// Initially, controls region is collapsed/hidden
expect(document.getElementById("quick-entry-controls")?.hasAttribute("hidden")).toBe(true);
@@ -530,7 +557,7 @@ describe("QuickEntryBox", () => {
});
it("opens dependency dropdown when clicking deps button", () => {
renderQuickEntryBox();
renderQuickEntryBox({}, { startCollapsed: true });
expandQuickEntry();
const textarea = screen.getByTestId("quick-entry-input");
@@ -543,7 +570,8 @@ describe("QuickEntryBox", () => {
});
it("opens model modal when clicking models button", () => {
renderQuickEntryBox();
renderQuickEntryBox({}, { startCollapsed: true });
// Component starts with disclosure expanded by default
expandQuickEntry();
const textarea = screen.getByTestId("quick-entry-input");
@@ -560,7 +588,8 @@ describe("QuickEntryBox", () => {
});
it("modal receives correct props (models, loading state, etc.)", () => {
renderQuickEntryBox();
renderQuickEntryBox({}, { startCollapsed: true });
// Component starts with disclosure expanded by default
expandQuickEntry();
const textarea = screen.getByTestId("quick-entry-input");
@@ -579,7 +608,8 @@ describe("QuickEntryBox", () => {
});
it("selects dependencies and includes them in submit payload", async () => {
const { props } = renderQuickEntryBox();
const { props } = renderQuickEntryBox({}, { startCollapsed: true });
// Component starts with disclosure expanded by default
expandQuickEntry();
const textarea = screen.getByTestId("quick-entry-input");
@@ -607,7 +637,6 @@ describe("QuickEntryBox", () => {
it("calls onPlanningMode and clears input when Plan clicked", async () => {
const onPlanningMode = vi.fn();
const { props } = renderQuickEntryBox({ onPlanningMode });
expandQuickEntry();
const textarea = screen.getByTestId("quick-entry-input");
fireEvent.change(textarea, { target: { value: "Plan this task" } });
@@ -624,10 +653,8 @@ describe("QuickEntryBox", () => {
it("calls onSubtaskBreakdown and clears input when Subtask clicked", async () => {
const onSubtaskBreakdown = vi.fn();
const { props } = renderQuickEntryBox({ onSubtaskBreakdown });
expandQuickEntry();
const textarea = screen.getByTestId("quick-entry-input");
fireEvent.focus(textarea);
fireEvent.change(textarea, { target: { value: "Break this down" } });
fireEvent.click(screen.getByTestId("subtask-button"));
@@ -640,7 +667,8 @@ describe("QuickEntryBox", () => {
});
it("disables Plan and Subtask buttons when description is empty", () => {
renderQuickEntryBox();
renderQuickEntryBox({}, { startCollapsed: true });
// Component starts with disclosure expanded by default
expandQuickEntry();
const textarea = screen.getByTestId("quick-entry-input");
@@ -666,7 +694,8 @@ describe("QuickEntryBox", () => {
});
it("Plan button prevents textarea blur on mousedown", () => {
renderQuickEntryBox();
renderQuickEntryBox({}, { startCollapsed: true });
// Component starts with disclosure expanded by default
expandQuickEntry();
const textarea = screen.getByTestId("quick-entry-input");
@@ -684,7 +713,8 @@ describe("QuickEntryBox", () => {
});
it("Subtask button prevents textarea blur on mousedown", () => {
renderQuickEntryBox();
renderQuickEntryBox({}, { startCollapsed: true });
// Component starts with disclosure expanded by default
expandQuickEntry();
const textarea = screen.getByTestId("quick-entry-input");
@@ -722,7 +752,8 @@ describe("QuickEntryBox", () => {
});
it("includes selected models in submit payload", async () => {
const { props } = renderQuickEntryBox();
const { props } = renderQuickEntryBox({}, { startCollapsed: true });
// Component starts with disclosure expanded by default
expandQuickEntry();
const textarea = screen.getByTestId("quick-entry-input");
@@ -753,7 +784,8 @@ describe("QuickEntryBox", () => {
});
it("closes modal on Escape when open", async () => {
renderQuickEntryBox();
renderQuickEntryBox({}, { startCollapsed: true });
// Component starts with disclosure expanded by default
expandQuickEntry();
const textarea = screen.getByTestId("quick-entry-input");
@@ -774,7 +806,8 @@ describe("QuickEntryBox", () => {
});
it("clears all state on second Escape after dropdowns are closed", () => {
renderQuickEntryBox();
renderQuickEntryBox({}, { startCollapsed: true });
// Component starts with disclosure expanded by default
expandQuickEntry();
const textarea = screen.getByTestId("quick-entry-input");
@@ -791,8 +824,9 @@ describe("QuickEntryBox", () => {
expect(textarea.classList.contains("quick-entry-input--expanded")).toBe(false);
});
it("resets all state after successful creation", async () => {
const { props } = renderQuickEntryBox();
it("resets all state after successful creation (preserves disclosure preference)", async () => {
const { props } = renderQuickEntryBox({}, { startCollapsed: true });
// Component starts with disclosure expanded by default
expandQuickEntry();
const textarea = screen.getByTestId("quick-entry-input");
@@ -804,10 +838,12 @@ describe("QuickEntryBox", () => {
expect(props.onCreate).toHaveBeenCalled();
});
// After creation, controls should be collapsed
// After creation, input should be cleared
expect((textarea as HTMLTextAreaElement).value).toBe("");
expect(screen.getByTestId("quick-entry-toggle").getAttribute("aria-expanded")).toBe("false");
expect(document.getElementById("quick-entry-controls")?.hasAttribute("hidden")).toBe(true);
// Disclosure preference persists - controls remain visible since we expanded earlier
expect(screen.getByTestId("quick-entry-deps-button")).toBeTruthy();
expect(screen.getByTestId("plan-button")).toBeTruthy();
expect(screen.getByTestId("subtask-button")).toBeTruthy();
});
});
@@ -821,11 +857,84 @@ describe("QuickEntryBox", () => {
localStorage.clear();
});
it("restores disclosure state from localStorage on mount", () => {
// Pre-populate localStorage with expanded state
localStorage.setItem("kb-quick-entry-expanded", "true");
renderQuickEntryBox();
const toggleButton = screen.getByTestId("quick-entry-toggle");
// Should restore the saved disclosure state (expanded)
expect(toggleButton.getAttribute("aria-expanded")).toBe("true");
// Controls should be visible
expect(screen.getByTestId("quick-entry-deps-button")).toBeTruthy();
});
it("defaults to expanded when localStorage is empty", () => {
renderQuickEntryBox();
const toggleButton = screen.getByTestId("quick-entry-toggle");
// Should default to expanded (true) for backward compatibility
expect(toggleButton.getAttribute("aria-expanded")).toBe("true");
// Controls should be visible
expect(screen.getByTestId("quick-entry-deps-button")).toBeTruthy();
});
it("updates localStorage when toggling disclosure", async () => {
renderQuickEntryBox({}, { startCollapsed: true });
const toggleButton = screen.getByTestId("quick-entry-toggle");
// Wait for initial state to be persisted (useEffect runs after mount)
await waitFor(() => {
expect(localStorage.getItem("kb-quick-entry-expanded")).toBe("false");
});
// Initially collapsed
expect(toggleButton.getAttribute("aria-expanded")).toBe("false");
// Click to expand
fireEvent.click(toggleButton);
// Should be expanded
expect(toggleButton.getAttribute("aria-expanded")).toBe("true");
// localStorage should be updated
await waitFor(() => {
expect(localStorage.getItem("kb-quick-entry-expanded")).toBe("true");
});
// Click to collapse
fireEvent.click(toggleButton);
// Should be collapsed
expect(toggleButton.getAttribute("aria-expanded")).toBe("false");
// localStorage should be updated
await waitFor(() => {
expect(localStorage.getItem("kb-quick-entry-expanded")).toBe("false");
});
});
it("aria-expanded attribute updates correctly when toggling", () => {
renderQuickEntryBox({}, { startCollapsed: true });
const toggleButton = screen.getByTestId("quick-entry-toggle");
// Initially collapsed
expect(toggleButton.getAttribute("aria-expanded")).toBe("false");
// Click to expand
fireEvent.click(toggleButton);
expect(toggleButton.getAttribute("aria-expanded")).toBe("true");
// Click to collapse
fireEvent.click(toggleButton);
expect(toggleButton.getAttribute("aria-expanded")).toBe("false");
});
it("restores description from localStorage on mount", () => {
// Pre-populate localStorage
localStorage.setItem("kb-quick-entry-text", "Saved task description");
renderQuickEntryBox();
renderQuickEntryBox({}, { startCollapsed: true });
// Component starts with disclosure expanded by default
const textarea = screen.getByTestId("quick-entry-input");
// Should restore the saved description
@@ -833,7 +942,8 @@ describe("QuickEntryBox", () => {
});
it("updates localStorage when typing", async () => {
renderQuickEntryBox();
renderQuickEntryBox({}, { startCollapsed: true });
// Component starts with disclosure expanded by default
const textarea = screen.getByTestId("quick-entry-input");
fireEvent.change(textarea, { target: { value: "Typing this task" } });
@@ -845,7 +955,8 @@ describe("QuickEntryBox", () => {
});
it("clears localStorage after successful task creation", async () => {
const { props } = renderQuickEntryBox();
const { props } = renderQuickEntryBox({}, { startCollapsed: true });
// Component starts with disclosure expanded by default
const textarea = screen.getByTestId("quick-entry-input");
// Type something to set localStorage
@@ -866,7 +977,8 @@ describe("QuickEntryBox", () => {
});
it("clears localStorage when Escape clears non-empty input", async () => {
renderQuickEntryBox();
renderQuickEntryBox({}, { startCollapsed: true });
// Component starts with disclosure expanded by default
expandQuickEntry();
const textarea = screen.getByTestId("quick-entry-input");
@@ -885,7 +997,8 @@ describe("QuickEntryBox", () => {
});
it("does not clear localStorage on first Escape when closing dropdowns", () => {
renderQuickEntryBox();
renderQuickEntryBox({}, { startCollapsed: true });
// Component starts with disclosure expanded by default
expandQuickEntry();
const textarea = screen.getByTestId("quick-entry-input");
@@ -907,7 +1020,8 @@ describe("QuickEntryBox", () => {
describe("AI Refine feature", () => {
it("shows refine button when expanded and text is entered", () => {
renderQuickEntryBox();
renderQuickEntryBox({}, { startCollapsed: true });
// Component starts with disclosure expanded by default
// Initially, controls region is collapsed/hidden
expect(document.getElementById("quick-entry-controls")?.hasAttribute("hidden")).toBe(true);
@@ -922,7 +1036,8 @@ describe("QuickEntryBox", () => {
});
it("refine button is hidden when textarea is empty", () => {
renderQuickEntryBox();
renderQuickEntryBox({}, { startCollapsed: true });
// Component starts with disclosure expanded by default
expandQuickEntry();
const textarea = screen.getByTestId("quick-entry-input");
@@ -941,7 +1056,8 @@ describe("QuickEntryBox", () => {
});
it("opens refine menu on button click", () => {
renderQuickEntryBox();
renderQuickEntryBox({}, { startCollapsed: true });
// Component starts with disclosure expanded by default
expandQuickEntry();
const textarea = screen.getByTestId("quick-entry-input");
@@ -956,7 +1072,8 @@ describe("QuickEntryBox", () => {
});
it("closes refine menu on Escape key", () => {
renderQuickEntryBox();
renderQuickEntryBox({}, { startCollapsed: true });
// Component starts with disclosure expanded by default
expandQuickEntry();
const textarea = screen.getByTestId("quick-entry-input");
@@ -978,7 +1095,8 @@ describe("QuickEntryBox", () => {
const { refineText } = await import("../../api");
vi.mocked(refineText).mockResolvedValueOnce("Refined description");
renderQuickEntryBox();
renderQuickEntryBox({}, { startCollapsed: true });
// Component starts with disclosure expanded by default
expandQuickEntry();
const textarea = screen.getByTestId("quick-entry-input");
@@ -1001,7 +1119,8 @@ describe("QuickEntryBox", () => {
const { refineText } = await import("../../api");
vi.mocked(refineText).mockResolvedValueOnce("Refined description");
const { props } = renderQuickEntryBox();
const { props } = renderQuickEntryBox({}, { startCollapsed: true });
// Component starts with disclosure expanded by default
expandQuickEntry();
const textarea = screen.getByTestId("quick-entry-input");
@@ -1030,7 +1149,8 @@ describe("QuickEntryBox", () => {
const { getRefineErrorMessage } = await import("../../api");
const { props } = renderQuickEntryBox();
const { props } = renderQuickEntryBox({}, { startCollapsed: true });
// Component starts with disclosure expanded by default
expandQuickEntry();
const textarea = screen.getByTestId("quick-entry-input");
@@ -1051,7 +1171,8 @@ describe("QuickEntryBox", () => {
// Slow down the promise to see loading state
vi.mocked(refineText).mockImplementation(() => new Promise((resolve) => setTimeout(resolve, 100)));
renderQuickEntryBox();
renderQuickEntryBox({}, { startCollapsed: true });
// Component starts with disclosure expanded by default
expandQuickEntry();
const textarea = screen.getByTestId("quick-entry-input");
@@ -1073,7 +1194,8 @@ describe("QuickEntryBox", () => {
const { refineText } = await import("../../api");
vi.mocked(refineText).mockResolvedValueOnce("Refined description with much more content here");
renderQuickEntryBox();
renderQuickEntryBox({}, { startCollapsed: true });
// Component starts with disclosure expanded by default
expandQuickEntry();
const textarea = screen.getByTestId("quick-entry-input");
@@ -1090,7 +1212,8 @@ describe("QuickEntryBox", () => {
const { refineText } = await import("../../api");
vi.mocked(refineText).mockResolvedValueOnce("Refined text");
const { props } = renderQuickEntryBox();
const { props } = renderQuickEntryBox({}, { startCollapsed: true });
// Component starts with disclosure expanded by default
expandQuickEntry();
const textarea = screen.getByTestId("quick-entry-input");
@@ -1114,7 +1237,8 @@ describe("QuickEntryBox", () => {
describe("Save button", () => {
it("shows save button when expanded and text is entered", () => {
renderQuickEntryBox();
renderQuickEntryBox({}, { startCollapsed: true });
// Component starts with disclosure expanded by default
// Initially, controls region is collapsed/hidden
expect(document.getElementById("quick-entry-controls")?.hasAttribute("hidden")).toBe(true);
@@ -1129,7 +1253,8 @@ describe("QuickEntryBox", () => {
});
it("save button is disabled when textarea is empty", () => {
renderQuickEntryBox();
renderQuickEntryBox({}, { startCollapsed: true });
// Component starts with disclosure expanded by default
expandQuickEntry();
const textarea = screen.getByTestId("quick-entry-input");
@@ -1148,7 +1273,8 @@ describe("QuickEntryBox", () => {
});
it("save button is disabled during submission", async () => {
const { props } = renderQuickEntryBox();
const { props } = renderQuickEntryBox({}, { startCollapsed: true });
// Component starts with disclosure expanded by default
// Slow down the promise to see loading state
props.onCreate.mockImplementation(() => new Promise((resolve) => setTimeout(resolve, 100)));
@@ -1169,8 +1295,9 @@ describe("QuickEntryBox", () => {
});
});
it("clicking save button clears localStorage after successful submission", async () => {
const { props } = renderQuickEntryBox();
it("clicking save button persists to localStorage", async () => {
renderQuickEntryBox({}, { startCollapsed: true });
// Component starts with disclosure expanded by default
expandQuickEntry();
const textarea = screen.getByTestId("quick-entry-input");
@@ -1192,7 +1319,8 @@ describe("QuickEntryBox", () => {
});
it("clicking save button creates the task", async () => {
const { props } = renderQuickEntryBox();
const { props } = renderQuickEntryBox({}, { startCollapsed: true });
// Component starts with disclosure expanded by default
expandQuickEntry();
const textarea = screen.getByTestId("quick-entry-input");
@@ -1213,7 +1341,8 @@ describe("QuickEntryBox", () => {
});
it("save button has correct test id", () => {
renderQuickEntryBox();
renderQuickEntryBox({}, { startCollapsed: true });
// Component starts with disclosure expanded by default
expandQuickEntry();
const textarea = screen.getByTestId("quick-entry-input");
@@ -1225,7 +1354,8 @@ describe("QuickEntryBox", () => {
});
it("save button has correct title attribute", () => {
renderQuickEntryBox();
renderQuickEntryBox({}, { startCollapsed: true });
// Component starts with disclosure expanded by default
expandQuickEntry();
const textarea = screen.getByTestId("quick-entry-input");
@@ -1236,7 +1366,8 @@ describe("QuickEntryBox", () => {
});
it("save button prevents textarea blur on mousedown", () => {
renderQuickEntryBox();
renderQuickEntryBox({}, { startCollapsed: true });
// Component starts with disclosure expanded by default
expandQuickEntry();
const textarea = screen.getByTestId("quick-entry-input");

481
packages/dashboard/app/styles.css
View File

@@ -10519,6 +10519,93 @@ html .column.drag-over * {
}
}
/* Quick Entry Box main row with toggle */
.quick-entry-main-row {
display: flex;
align-items: flex-start;
gap: 8px;
}
.quick-entry-main-row .quick-entry-input {
flex: 1;
min-width: 0;
}
.quick-entry-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px;
height: 32px;
width: 32px;
flex-shrink: 0;
background: transparent;
border: 1px solid transparent;
border-radius: var(--radius-sm);
color: var(--text-muted);
cursor: pointer;
transition: all var(--transition-fast);
}
.quick-entry-toggle:hover {
background: var(--card-hover);
border-color: var(--border);
color: var(--text);
}
.quick-entry-toggle:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}
/* Expanded state - normal padding */
.quick-entry-box--expanded {
padding: 8px 10px;
}
.quick-entry-box--expanded .quick-entry-input {
min-height: 36px;
}
/* Collapsed state - minimal padding */
.quick-entry-box--collapsed {
padding: 6px 8px;
}
.quick-entry-box--collapsed .quick-entry-input {
min-height: 32px;
border-bottom-color: transparent;
}
.quick-entry-box--collapsed .quick-entry-input:focus {
border-bottom-color: var(--triage);
}
/* Responsive adjustments for quick entry */
@media (max-width: 640px) {
.quick-entry-controls {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.quick-entry-controls-left {
width: 100%;
}
.quick-entry-hint {
margin-left: 0;
width: 100%;
text-align: center;
}
.quick-entry-toggle {
height: 28px;
width: 28px;
padding: 4px;
}
}
/* === New Task Modal === */
.new-task-modal .modal-body {
padding: 20px 24px;
@@ -12811,3 +12898,397 @@ html .column.drag-over * {
[data-theme="light"] .gm-load-more:hover {
background: rgba(0, 0, 0, 0.03);
}
/* ── Task Changes Tab Styles ─────────────────────────────────────────────── */
.task-changes-tab {
padding: 16px;
}
.changes-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.changes-header h4 {
margin: 0;
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 500;
}
.changes-file-list {
border: 1px solid var(--border, #30363d);
border-radius: 8px;
overflow: hidden;
}
.changes-file-item {
border-bottom: 1px solid var(--border, #30363d);
}
.changes-file-item:last-child {
border-bottom: none;
}
.changes-file-item.expanded {
background: var(--bg-secondary, #161b22);
}
.changes-file-header {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
background: none;
border: none;
width: 100%;
text-align: left;
cursor: pointer;
color: var(--text-primary, #c9d1d9);
font-size: 13px;
transition: background 0.15s;
}
.changes-file-header:hover {
background: var(--bg-hover, #1f242c);
}
.changes-file-toggle {
display: flex;
align-items: center;
color: var(--text-secondary, #8b949e);
flex-shrink: 0;
}
.changes-file-status {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
flex-shrink: 0;
}
.changes-file-path {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}
.changes-file-stat {
color: var(--text-secondary, #8b949e);
font-size: 11px;
flex-shrink: 0;
margin-left: 8px;
}
.changes-file-content {
border-top: 1px solid var(--border, #30363d);
background: var(--bg-primary, #0d1117);
}
.changes-diff-patch {
margin: 0;
padding: 12px;
font-size: 12px;
line-height: 1.5;
overflow-x: auto;
white-space: pre;
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
color: var(--text-primary, #c9d1d9);
}
.changes-diff-patch code {
background: none;
padding: 0;
}
/* Syntax highlighting for diff */
.changes-diff-patch .diff-add,
.changes-diff-patch [data-prefix="+"] {
color: #3fb950;
}
.changes-diff-patch .diff-del,
.changes-diff-patch [data-prefix="-"] {
color: #f85149;
}
.changes-diff-patch .diff-hunk,
.changes-diff-patch [data-prefix="@@"] {
color: #58a6ff;
}
/* === Project Selector === */
.project-selector {
position: relative;
}
.project-selector__trigger {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
border-radius: var(--radius-md);
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
font-size: 12px;
cursor: pointer;
transition: background var(--transition-fast), border-color var(--transition-fast);
}
.project-selector__trigger:hover {
background: var(--card-hover);
border-color: var(--text-dim);
}
.project-selector__trigger.open {
border-color: var(--todo);
}
.project-selector__trigger-icon {
flex-shrink: 0;
color: var(--text-muted);
}
.project-selector__trigger-text {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.project-selector__trigger-chevron {
flex-shrink: 0;
color: var(--text-muted);
transition: transform var(--transition-fast);
}
.project-selector__trigger-chevron.rotate {
transform: rotate(180deg);
}
.project-selector__dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
z-index: 100;
min-width: 280px;
max-width: 360px;
padding: 8px;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--surface);
box-shadow: var(--shadow-lg);
}
.project-selector__search {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
margin-bottom: 8px;
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
}
.project-selector__search-icon {
flex-shrink: 0;
color: var(--text-muted);
}
.project-selector__search-input {
flex: 1;
min-width: 0;
background: none;
border: none;
color: var(--text);
font-size: 13px;
outline: none;
}
.project-selector__search-input::placeholder {
color: var(--text-dim);
}
.project-selector__search-clear {
display: flex;
align-items: center;
justify-content: center;
padding: 4px;
background: none;
border: none;
color: var(--text-muted);
cursor: pointer;
border-radius: var(--radius-sm);
transition: background var(--transition-fast), color var(--transition-fast);
}
.project-selector__search-clear:hover {
background: var(--border);
color: var(--text);
}
.project-selector__section {
margin-bottom: 8px;
}
.project-selector__section:last-of-type {
margin-bottom: 0;
}
.project-selector__section-header {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 8px;
margin-bottom: 4px;
font-size: 11px;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.project-selector__item {
width: 100%;
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
background: transparent;
border: none;
border-radius: var(--radius-md);
color: var(--text);
font-size: 13px;
cursor: pointer;
text-align: left;
transition: background var(--transition-fast);
}
.project-selector__item:hover {
background: var(--card-hover);
}
.project-selector__item.highlighted {
background: var(--card-hover);
outline: 1px solid var(--todo);
}
.project-selector__item-name {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 500;
}
.project-selector__item-check {
flex-shrink: 0;
color: var(--todo);
}
.project-selector__item-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.project-selector__item-path {
font-size: 11px;
color: var(--text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.project-selector__no-results {
padding: 12px 10px;
font-size: 13px;
color: var(--text-dim);
text-align: center;
}
.project-selector__footer {
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid var(--border);
}
.project-selector__view-all {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 8px 10px;
background: transparent;
border: 1px solid var(--border);
border-radius: var(--radius-md);
color: var(--text-muted);
font-size: 13px;
cursor: pointer;
transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.project-selector__view-all:hover {
background: var(--card-hover);
border-color: var(--text-dim);
color: var(--text);
}
.project-selector__view-all.highlighted {
background: var(--card-hover);
border-color: var(--todo);
color: var(--text);
}
/* Light theme overrides */
[data-theme="light"] .project-selector__trigger {
background: var(--surface);
}
[data-theme="light"] .project-selector__trigger:hover {
background: var(--card-hover);
}
[data-theme="light"] .project-selector__dropdown {
background: var(--surface);
}
[data-theme="light"] .project-selector__search {
background: var(--card);
}
[data-theme="light"] .project-selector__item:hover {
background: var(--card-hover);
}
[data-theme="light"] .project-selector__item.highlighted {
background: rgba(88, 166, 255, 0.1);
}
[data-theme="light"] .project-selector__view-all {
border-color: var(--border);
}
[data-theme="light"] .project-selector__view-all:hover {
background: var(--card-hover);
}