alex
8c7affc933
Fixed import paths for 43 components moved into features/ directories. Key fixes: - api/, types/, hooks/, state/, utils/ imports need ../../../ from features/*/ - components/ imports need ../../ from features/*/ - Cross-feature imports use relative paths (e.g., ../tool/tools-bottom-sheet) - app-shell.tsx updated to import from features/ subdirectories Frontend typecheck now passes except for one pre-existing error: xterm-addon-webgl missing type declarations. Quality gates: ruff passed on backend, py_compile passed on all backend files.
63 lines
1.6 KiB
TypeScript
63 lines
1.6 KiB
TypeScript
import { useLocation, useNavigate } from "react-router-dom";
|
|
import { Icon } from "../../icon";
|
|
|
|
interface ToolsBottomSheetProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
const TOOLS_ITEMS = [
|
|
{ to: "/tool-workshop", label: "Tool Workshop" },
|
|
{ to: "/config-profiles", label: "Config Profiles" },
|
|
];
|
|
|
|
export const ToolsBottomSheet: React.FC<ToolsBottomSheetProps> = ({
|
|
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="Tools menu"
|
|
>
|
|
<div className="mobile-bottom-sheet-header">
|
|
<div className="mobile-bottom-sheet-handle" />
|
|
<h3 className="mobile-bottom-sheet-title">Tools</h3>
|
|
</div>
|
|
<div className="mobile-bottom-sheet-content">
|
|
{TOOLS_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>
|
|
);
|
|
};
|