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,162 @@
+import { useState } from "react";
+import { Icon } from "./icon";
+
+interface FormField {
+  name: string;
+  label: string;
+  type: "text" | "textarea" | "number" | "select" | "checkbox" | "code";
+  value: string | number | boolean;
+  options?: { value: string; label: string }[];
+  placeholder?: string;
+  required?: boolean;
+  rows?: number;
+}
+
+interface MobileEditViewProps {
+  title: string;
+  fields?: FormField[];
+  onSave: (data: Record<string, string | number | boolean>) => void;
+  onCancel: () => void;
+  isSaving?: boolean;
+  children?: React.ReactNode;
+}
+
+export const MobileEditView: React.FC<MobileEditViewProps> = ({
+  title,
+  fields,
+  onSave,
+  onCancel,
+  isSaving = false,
+  children,
+}) => {
+  const [formData, setFormData] = useState<Record<string, string | number | boolean>>(
+    () => {
+      const initial: Record<string, string | number | boolean> = {};
+      fields?.forEach((field) => {
+        initial[field.name] = field.value;
+      });
+      return initial;
+    }
+  );
+
+  const handleChange = (name: string, value: string | number | boolean) => {
+    setFormData((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    onSave(formData);
+  };
+
+  return (
+    <div className="mobile-edit-view">
+      <header className="mobile-edit-header">
+        <button
+          className="mobile-edit-cancel"
+          onClick={onCancel}
+          type="button"
+          disabled={isSaving}
+        >
+          Cancel
+        </button>
+        <h1 className="mobile-edit-title">{title}</h1>
+        <button
+          className="mobile-edit-save"
+          onClick={() => onSave(formData)}
+          type="button"
+          disabled={isSaving}
+        >
+          {isSaving ? "Saving..." : "Save"}
+        </button>
+      </header>
+
+      <form className="mobile-edit-form" onSubmit={handleSubmit}>
+        {children || fields?.map((field) => (
+          <div key={field.name} className="mobile-edit-field">
+            <label className="mobile-edit-field-label" htmlFor={field.name}>
+              {field.label}
+              {field.required && <span className="required">*</span>}
+            </label>
+
+            {field.type === "textarea" && (
+              <textarea
+                id={field.name}
+                name={field.name}
+                value={String(formData[field.name] ?? "")}
+                onChange={(e) => handleChange(field.name, e.target.value)}
+                placeholder={field.placeholder}
+                required={field.required}
+                rows={field.rows || 4}
+                className="mobile-edit-input mobile-edit-textarea"
+              />
+            )}
+
+            {field.type === "select" && (
+              <select
+                id={field.name}
+                name={field.name}
+                value={String(formData[field.name] ?? "")}
+                onChange={(e) => handleChange(field.name, e.target.value)}
+                required={field.required}
+                className="mobile-edit-input"
+              >
+                {field.options?.map((option) => (
+                  <option key={option.value} value={option.value}>
+                    {option.label}
+                  </option>
+                ))}
+              </select>
+            )}
+
+            {field.type === "checkbox" && (
+              <label className="mobile-edit-checkbox">
+                <input
+                  type="checkbox"
+                  id={field.name}
+                  name={field.name}
+                  checked={Boolean(formData[field.name])}
+                  onChange={(e) => handleChange(field.name, e.target.checked)}
+                />
+                <span>{field.label}</span>
+              </label>
+            )}
+
+            {field.type === "code" && (
+              <textarea
+                id={field.name}
+                name={field.name}
+                value={String(formData[field.name] ?? "")}
+                onChange={(e) => handleChange(field.name, e.target.value)}
+                placeholder={field.placeholder}
+                required={field.required}
+                rows={field.rows || 8}
+                className="mobile-edit-input mobile-edit-code"
+                style={{ fontFamily: "monospace" }}
+              />
+            )}
+
+            {(field.type === "text" || field.type === "number") && (
+              <input
+                type={field.type === "number" ? "number" : "text"}
+                id={field.name}
+                name={field.name}
+                value={String(formData[field.name] ?? "")}
+                onChange={(e) =>
+                  handleChange(
+                    field.name,
+                    field.type === "number"
+                      ? Number(e.target.value)
+                      : e.target.value
+                  )
+                }
+                placeholder={field.placeholder}
+                required={field.required}
+                className="mobile-edit-input"
+              />
+            )}
+          </div>
+        ))}
+      </form>
+    </div>
+  );
+};