fix(ui): close sidebar on mobile when command palette opens
When searching via the command palette on mobile, the left sidebar now automatically closes so search results are visible. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -3,6 +3,7 @@ import { useNavigate } from "@/lib/router";
|
|||||||
import { useQuery } from "@tanstack/react-query";
|
import { useQuery } from "@tanstack/react-query";
|
||||||
import { useCompany } from "../context/CompanyContext";
|
import { useCompany } from "../context/CompanyContext";
|
||||||
import { useDialog } from "../context/DialogContext";
|
import { useDialog } from "../context/DialogContext";
|
||||||
|
import { useSidebar } from "../context/SidebarContext";
|
||||||
import { issuesApi } from "../api/issues";
|
import { issuesApi } from "../api/issues";
|
||||||
import { agentsApi } from "../api/agents";
|
import { agentsApi } from "../api/agents";
|
||||||
import { projectsApi } from "../api/projects";
|
import { projectsApi } from "../api/projects";
|
||||||
@@ -37,6 +38,7 @@ export function CommandPalette() {
|
|||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const { selectedCompanyId } = useCompany();
|
const { selectedCompanyId } = useCompany();
|
||||||
const { openNewIssue, openNewAgent } = useDialog();
|
const { openNewIssue, openNewAgent } = useDialog();
|
||||||
|
const { isMobile, setSidebarOpen } = useSidebar();
|
||||||
const searchQuery = query.trim();
|
const searchQuery = query.trim();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -44,11 +46,12 @@ export function CommandPalette() {
|
|||||||
if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
|
if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
setOpen(true);
|
setOpen(true);
|
||||||
|
if (isMobile) setSidebarOpen(false);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
document.addEventListener("keydown", handleKeyDown);
|
document.addEventListener("keydown", handleKeyDown);
|
||||||
return () => document.removeEventListener("keydown", handleKeyDown);
|
return () => document.removeEventListener("keydown", handleKeyDown);
|
||||||
}, []);
|
}, [isMobile, setSidebarOpen]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!open) setQuery("");
|
if (!open) setQuery("");
|
||||||
@@ -94,7 +97,10 @@ export function CommandPalette() {
|
|||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<CommandDialog open={open} onOpenChange={setOpen}>
|
<CommandDialog open={open} onOpenChange={(v) => {
|
||||||
|
setOpen(v);
|
||||||
|
if (v && isMobile) setSidebarOpen(false);
|
||||||
|
}}>
|
||||||
<CommandInput
|
<CommandInput
|
||||||
placeholder="Search issues, agents, projects..."
|
placeholder="Search issues, agents, projects..."
|
||||||
value={query}
|
value={query}
|
||||||
|
|||||||
Reference in New Issue
Block a user