feat: mobile tool workshop with list-detail pattern

- Add mobile viewport detection to ToolWorkshopPage - Implement mobile list view with MobileListView component - Implement mobile detail view with MobileDetailView component - Implement mobile edit view with MobileEditView component - Add MobileFAB for creating new tool types - Fix IconName type issues in mobile components - TypeScript check passes, build succeeds
2026-05-25 12:18:24 +02:00
parent 437ad840ef
commit e8d5b16acc
16 changed files with 1356 additions and 3853 deletions
@@ -0,0 +1,62 @@
+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>
+  );
+};