Developer
1d09193652
- Reorder desktop sidebar so Sessions sits between spaces/tools groups: Home, Projects, Workspaces, Sessions, Tool Workshop, Config Profiles, Settings. - Reorder mobile bottom nav so Sessions is the center item: Home, Spaces, Sessions, Tools, Settings. - Workspace cards already display the owning project name; no extra change needed. Quality gates: npm run typecheck, npm run lint clean, npm test -- --run 87 passed.
67 lines
1.5 KiB
TypeScript
67 lines
1.5 KiB
TypeScript
import { useLocation, useNavigate } from "react-router-dom";
|
|
import { Icon } from "../../icon";
|
|
|
|
interface SpacesBottomSheetProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
const SPACES_ITEMS = [
|
|
{ to: "/projects", label: "Projects" },
|
|
{ to: "/workspaces", label: "Workspaces" },
|
|
];
|
|
|
|
export const SpacesBottomSheet: React.FC<SpacesBottomSheetProps> = ({
|
|
isOpen,
|
|
onClose,
|
|
}) => {
|
|
const location = useLocation();
|
|
const navigate = useNavigate();
|
|
|
|
if (!isOpen) return null;
|
|
|
|
const handleSelect = (to: string) => {
|
|
onClose();
|
|
navigate(to);
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className="mobile-bottom-sheet-overlay"
|
|
onClick={onClose}
|
|
role="presentation"
|
|
>
|
|
<div
|
|
className="mobile-bottom-sheet"
|
|
onClick={(e) => e.stopPropagation()}
|
|
role="dialog"
|
|
aria-label="Spaces menu"
|
|
>
|
|
<div className="mobile-bottom-sheet-header">
|
|
<div className="mobile-bottom-sheet-handle" />
|
|
<h3 className="mobile-bottom-sheet-title">Spaces</h3>
|
|
</div>
|
|
<div className="mobile-bottom-sheet-content">
|
|
{SPACES_ITEMS.map((item) => (
|
|
<button
|
|
key={item.to}
|
|
className={`mobile-bottom-sheet-item ${
|
|
location.pathname === item.to ? "active" : ""
|
|
}`}
|
|
onClick={() => handleSelect(item.to)}
|
|
type="button"
|
|
>
|
|
<span className="mobile-bottom-sheet-item-label">
|
|
{item.label}
|
|
</span>
|
|
{location.pathname === item.to && (
|
|
<Icon name="success" size="sm" />
|
|
)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|