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,78 @@
+import { Icon } from "./icon";
+import type { IconName } from "../utils/icons";
+
+interface MobileListItem {
+  id: string;
+  title: string;
+  subtitle?: string;
+  icon?: string;
+  status?: string;
+}
+
+interface MobileListViewProps {
+  items: MobileListItem[];
+  onItemClick: (id: string) => void;
+  onItemDelete?: (id: string) => void;
+  onItemDuplicate?: (id: string) => void;
+  emptyMessage?: string;
+  searchPlaceholder?: string;
+  onSearch?: (query: string) => void;
+}
+
+export const MobileListView: React.FC<MobileListViewProps> = ({
+  items,
+  onItemClick,
+  onItemDelete,
+  onItemDuplicate,
+  emptyMessage = "No items found",
+  searchPlaceholder = "Search...",
+  onSearch,
+}) => {
+  return (
+    <div className="mobile-list-view">
+      {onSearch && (
+        <div className="mobile-list-search">
+          <input
+            type="search"
+            placeholder={searchPlaceholder}
+            onChange={(e) => onSearch(e.target.value)}
+            className="mobile-list-search-input"
+          />
+        </div>
+      )}
+
+      {items.length === 0 ? (
+        <div className="mobile-list-empty">
+          <Icon name="folder" size="lg" />
+          <p>{emptyMessage}</p>
+        </div>
+      ) : (
+        <div className="mobile-list-items">
+          {items.map((item) => (
+            <button
+              key={item.id}
+              className="mobile-list-item"
+              onClick={() => onItemClick(item.id)}
+              type="button"
+            >
+              {item.icon && (
+                <div className="mobile-list-item-icon">
+                  <Icon name={item.icon as IconName} size="md" />
+                </div>
+              )}
+              <div className="mobile-list-item-content">
+                <div className="mobile-list-item-title">{item.title}</div>
+                {item.subtitle && (
+                  <div className="mobile-list-item-subtitle">{item.subtitle}</div>
+                )}
+              </div>
+              <div className="mobile-list-item-actions" style={{ transform: "rotate(180deg)" }}>
+                <Icon name="arrow-left" size="sm" />
+              </div>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};