feat: Migrate RecipePage to use real OPModel data

- Updated RecipePage to load actual recipe data from OPModel table
- Added GetRecipe() and SaveRecipe() methods to communication layer
- Implemented real-time recipe editing with change tracking
- Added type definitions for GetRecipe and SaveRecipe in types.ts
- Recipe editor now displays all major fields:
  - Basic Settings (Motion Model, Auto Out Conveyor, Vendor Name, MFG)
  - Barcode Settings (1D, QR, Data Matrix)
  - Feature Flags (IgnoreOtherBarcode, DisableCamera, etc.)
- Copy and Delete operations now use recipe Title instead of id
- Added unsaved changes warning when switching recipes

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

FrontEnd/communication.ts

@@ -284,6 +284,65 @@ class CommunicationLayer {
             });
         }
     }
+
+    public async getRecipe(recipeTitle: string): Promise<string> {
+        if (isWebView && machine) {
+            return await machine.GetRecipe(recipeTitle);
+        } else {
+            return new Promise((resolve, reject) => {
+                if (!this.isConnected) {
+                    setTimeout(() => {
+                        if (!this.isConnected) reject("WebSocket connection timeout");
+                    }, 2000);
+                }
+
+                const timeoutId = setTimeout(() => {
+                    this.listeners = this.listeners.filter(cb => cb !== handler);
+                    reject("Recipe fetch timeout");
+                }, 10000);
+
+                const handler = (data: any) => {
+                    if (data.type === 'RECIPE_DATA') {
+                        clearTimeout(timeoutId);
+                        this.listeners = this.listeners.filter(cb => cb !== handler);
+                        resolve(JSON.stringify(data.data));
+                    }
+                };
+                this.listeners.push(handler);
+                this.ws?.send(JSON.stringify({ type: 'GET_RECIPE', recipeTitle }));
+            });
+        }
+    }
+
+    public async saveRecipe(recipeTitle: string, recipeData: string): Promise<{ success: boolean; message: string; recipeId?: string }> {
+        if (isWebView && machine) {
+            const resultJson = await machine.SaveRecipe(recipeTitle, recipeData);
+            return JSON.parse(resultJson);
+        } else {
+            return new Promise((resolve, reject) => {
+                if (!this.isConnected) {
+                    setTimeout(() => {
+                        if (!this.isConnected) reject({ success: false, message: "WebSocket connection timeout" });
+                    }, 2000);
+                }
+
+                const timeoutId = setTimeout(() => {
+                    this.listeners = this.listeners.filter(cb => cb !== handler);
+                    reject({ success: false, message: "Recipe save timeout" });
+                }, 10000);
+
+                const handler = (data: any) => {
+                    if (data.type === 'RECIPE_SAVED') {
+                        clearTimeout(timeoutId);
+                        this.listeners = this.listeners.filter(cb => cb !== handler);
+                        resolve(data.data);
+                    }
+                };
+                this.listeners.push(handler);
+                this.ws?.send(JSON.stringify({ type: 'SAVE_RECIPE', recipeTitle, recipeData }));
+            });
+        }
+    }
 }
 
 export const comms = new CommunicationLayer();