Bring hotfixes from main to dev

.github/workflows/deploy.yml

@@ -46,4 +46,6 @@ jobs:
             VITE_WS_URL=${{ secrets.VITE_WS_URL }}
             VITE_AUTH0_DOMAIN=${{ secrets.VITE_AUTH0_DOMAIN }}
             VITE_AUTH0_CLIENT_ID=${{ secrets.VITE_AUTH0_CLIENT_ID }}
-            VITE_AUTH0_AUDIENCE=${{ secrets.VITE_AUTH0_AUDIENCE }}
+            VITE_AUTH0_AUDIENCE=${{ secrets.VITE_AUTH0_AUDIENCE }}
+            VITE_PLAUSIBLE_DOMAIN=${{ secrets.VITE_PLAUSIBLE_DOMAIN }}
+            VITE_PLAUSIBLE_ENDPOINT=${{ secrets.VITE_PLAUSIBLE_ENDPOINT }}

backend/package.json

@@ -7,6 +7,7 @@
   "type": "module",
   "private": true,
   "dependencies": {
+    "@plausible-analytics/tracker": "^0.4.4",
     "@types/cors": "^2.8.19",
     "@types/express": "^5.0.6",
     "@types/multer": "^2.0.0",

frontend/Dockerfile

@@ -33,11 +33,15 @@ ARG VITE_WS_URL
 ARG VITE_AUTH0_DOMAIN
 ARG VITE_AUTH0_CLIENT_ID
 ARG VITE_AUTH0_AUDIENCE
+ARG VITE_PLAUSIBLE_DOMAIN
+ARG VITE_PLAUSIBLE_ENDPOINT
 ENV VITE_API_URL=$VITE_API_URL \
     VITE_WS_URL=$VITE_WS_URL \
     VITE_AUTH0_DOMAIN=$VITE_AUTH0_DOMAIN \
     VITE_AUTH0_CLIENT_ID=$VITE_AUTH0_CLIENT_ID \
-    VITE_AUTH0_AUDIENCE=$VITE_AUTH0_AUDIENCE
+    VITE_AUTH0_AUDIENCE=$VITE_AUTH0_AUDIENCE \
+    VITE_PLAUSIBLE_DOMAIN=$VITE_PLAUSIBLE_DOMAIN \
+    VITE_PLAUSIBLE_ENDPOINT=$VITE_PLAUSIBLE_ENDPOINT
 
 RUN npm run build --workspace frontend
 

frontend/src/editor/components/modals/RecipeModal.tsx

@@ -120,11 +120,11 @@ function RecipeModal({ show, onModalSubmit, RequiredInput, RequiredOutput }: Rec
     return (
         <Modal show={show} animation={false} centered onHide={handleClose} dialogClassName="recipe-dialog">
             <Modal.Header closeButton className="w-100">
-                <div className="w-100 d-flex flex-row justify-content-between align-items-center me-2 gap-2">
-                    <Modal.Title className="mb-0">Items</Modal.Title>
+                <div className="w-100 d-flex flex-row justify-content-between me-2">
+                    <Modal.Title>Items</Modal.Title>
                     {!RequiredOutput && (
                         <input type="text" placeholder="Search" value={searchTerm} ref={searchBarRef}
-                               onChange={handleSearch} className="form-control flex-grow-1" style={{maxWidth: '300px'}}/>
+                               onChange={handleSearch} className="form-control w-50"/>
                     )}
                 </div>
             </Modal.Header>

frontend/src/editor/components/modals/RecipeModal.tsx.css

@@ -43,71 +43,21 @@
 }
 
 .itemCard {
-    width: 120px; /* Smaller on mobile */
-}
-
-@media (min-width: 768px) {
-    .itemCard {
-        width: 140px;
-    }
-}
-
-@media (min-width: 992px) {
-    .itemCard {
-        width: 160px;
-    }
+    width: 160px;
 }
 
 .recipeCard {
     max-height: 200px;
-    flex: 1 1 100%; /* Mobile: 1 card per row */
-    min-width: 200px;
-}
-
-/* Tablet: 2 cards per row */
-@media (min-width: 768px) {
-    .recipeCard {
-        flex: 1 1 calc(50% - 0.75rem);
-        max-width: calc(50% - 0.75rem);
-    }
-}
-
-/* Desktop: 3 cards per row */
-@media (min-width: 992px) {
-    .recipeCard {
-        flex: 1 1 calc(33.333% - 0.75rem);
-        max-width: calc(33.333% - 0.75rem);
-    }
-}
-
-/* Wide monitors: 4 cards per row */
-@media (min-width: 1400px) {
-    .recipeCard {
-        flex: 1 1 calc(25% - 0.75rem);
-        max-width: calc(25% - 0.75rem);
-    }
 }
 
 .recipeBigIcon{
-    width: 36px; /* Smaller on mobile */
-}
-
-@media (min-width: 768px) {
-    .recipeBigIcon {
-        width: 42px;
-    }
-}
-
-@media (min-width: 992px) {
-    .recipeBigIcon {
-        width: 48px;
-    }
+    width: 48px;
 }
 
 .recipeSmallIcon{
-    width: 24px;
-    bottom: -12px;
-    left: -16px;
+    width: 30px;
+    bottom: -15px;
+    left: -20px;
     display: inline-block;
     position: relative;
 
@@ -116,39 +66,9 @@
     background: #212529;
 }
 
-@media (min-width: 768px) {
-    .recipeSmallIcon {
-        width: 27px;
-        bottom: -14px;
-        left: -18px;
-    }
-}
-
-@media (min-width: 992px) {
-    .recipeSmallIcon {
-        width: 30px;
-        bottom: -15px;
-        left: -20px;
-    }
-}
-
 .recipeTinyIcon{
-    width: 20px;
-    margin-right: 3px;
-}
-
-@media (min-width: 768px) {
-    .recipeTinyIcon {
-        width: 22px;
-        margin-right: 4px;
-    }
-}
-
-@media (min-width: 992px) {
-    .recipeTinyIcon {
-        width: 25px;
-        margin-right: 5px;
-    }
+    width: 25px;
+    margin-right: 5px;
 }
 
 .recipeContainer {
@@ -159,19 +79,7 @@
 }
 
 .left-col{
-    width: 60px; /* Smaller on mobile */
-}
-
-@media (min-width: 768px) {
-    .left-col {
-        width: 70px;
-    }
-}
-
-@media (min-width: 992px) {
-    .left-col {
-        width: 80px;
-    }
+    width: 80px;
 }
 
 .selected-card {
@@ -206,33 +114,4 @@
 
 .recipe-dialog .modal-body {
     overflow-y: auto; /* scroll INSIDE modal */
-}
-
-/* Mobile font adjustments */
-.recipeCard .fs-8 {
-    font-size: 0.75rem;
-}
-
-.recipeCard .fs-7 {
-    font-size: 0.85rem;
-}
-
-@media (min-width: 768px) {
-    .recipeCard .fs-8 {
-        font-size: 0.8rem;
-    }
-
-    .recipeCard .fs-7 {
-        font-size: 0.9rem;
-    }
-}
-
-@media (min-width: 992px) {
-    .recipeCard .fs-8 {
-        font-size: 0.875rem;
-    }
-
-    .recipeCard .fs-7 {
-        font-size: 1rem;
-    }
 }

frontend/src/editor/hooks/useNodeSpawner.ts

@@ -69,7 +69,7 @@ export function useNodeSpawner(ydocRef: React.RefObject<Y.Doc | null>) {
 
             doc.transact(() => {
                 nodeMap.set(nodeId, stripComputedFields(newNode!));
-                reactFlow.setNodes((nodes) => [...nodes, stripComputedFields(newNode!)]);
+                reactFlow.setNodes((nodes) => [...nodes, newNode!]);
 
                 if (!pendingConnection) return;
 

frontend/src/editor/hooks/useYjsMutation.ts

@@ -27,7 +27,7 @@ export function useYjsMutation() {
             if (node) {
                 reactflow.setNodes((nds) =>
                     nds.map((n) =>
-                        n.id === nodeId ? stripComputedFields({ ...n, data: { ...n.data, ...patch } }) : n,
+                        n.id === nodeId ? { ...n, data: { ...n.data, ...patch } } : n,
                     ),
                 );
 

frontend/src/main.tsx

@@ -4,6 +4,15 @@ import './index.css'
 import {Auth0Wrapper} from "./auth/auth0.tsx";
 import App from "./App.tsx";
 import {ClientSettingsProvider} from "./context/ClientSettingsContext.tsx";
+import { init } from "@plausible-analytics/tracker";
+
+if (import.meta.env.VITE_PLAUSIBLE_DOMAIN && import.meta.env.VITE_PLAUSIBLE_ENDPOINT) {
+    init({
+        domain: import.meta.env.VITE_PLAUSIBLE_DOMAIN,
+        endpoint: import.meta.env.VITE_PLAUSIBLE_ENDPOINT,
+        fileDownloads: true,
+    })
+}
 
 createRoot(document.getElementById('root')!).render(
     <StrictMode>