feat: add title bar to whiteboard modules

src/backend/default_canvas.json

@@ -2146,21 +2146,21 @@
             "lastCommittedPoint": null
         },
         {
-            "x": 0,
-            "y": 0,
+            "x": 20,
+            "y": -20,
             "id": "1igpgsvrsh3",
             "link": "!dashboard",
             "seed": 76441,
             "type": "embeddable",
             "angle": 0,
             "index": "b0q",
-            "width": 340,
-            "height": 280,
+            "width": 420,
+            "height": 320,
             "locked": false,
             "frameId": null,
             "opacity": 100,
-            "updated": 1744437345493,
-            "version": 1890,
+            "updated": 1745779075413,
+            "version": 2052,
             "groupIds": [],
             "fillStyle": "solid",
             "isDeleted": false,
@@ -2172,40 +2172,13 @@
             "strokeColor": "#ced4da",
             "strokeStyle": "solid",
             "strokeWidth": 2,
-            "versionNonce": 1530984984,
+            "versionNonce": 692312488,
             "boundElements": [],
-            "backgroundColor": "#e9ecef"
-        },
-        {
-            "x": 755.6666259765625,
-            "y": 137.1666259765625,
-            "id": "g8btk6ouog",
-            "link": "https://coder.pad.ws/@romaincourtoismails/ubuntu.main/terminal",
-            "seed": 2344,
-            "type": "embeddable",
-            "angle": 0,
-            "index": "b0r",
-            "width": 600,
-            "height": 400,
-            "locked": false,
-            "frameId": null,
-            "opacity": 100,
-            "updated": 1744437380078,
-            "version": 3,
-            "groupIds": [],
-            "fillStyle": "solid",
-            "isDeleted": true,
-            "roughness": 1,
-            "roundness": {
-                "type": 3
-            },
-            "isSelected": true,
-            "strokeColor": "#1e1e1e",
-            "strokeStyle": "solid",
-            "strokeWidth": 2,
-            "versionNonce": 748163688,
-            "boundElements": null,
-            "backgroundColor": "#ffffff"
+            "backgroundColor": "#e9ecef",
+            "customData": {
+                "showHyperlinkIcon": false
+            }
         }
     ]
-}
+}
+

src/frontend/index.scss

@@ -39,11 +39,6 @@ body {
     display: none !important;
 }
 
-.excalidraw__embeddable__outer {
-    padding: 0px !important;
-    pointer-events: all !important;
-}
-
 .excalidraw .layer-ui__wrapper__top-right {
     gap: 0rem;
 }
@@ -67,4 +62,21 @@ body {
 
 .excalidraw .Modal__content {
     animation: Modal__content_fade-in 0.3s ease-out forwards !important;
-}
+}
+
+/* Embeddables */
+
+.excalidraw__embeddable-container { /* 1st layer */
+    display: block;
+}
+
+.excalidraw__embeddable-container__inner { /* 2nd layer */
+    border-color: #525252 !important;
+    overflow: visible !important;
+}
+
+.excalidraw__embeddable__outer { /* 3rd layer */
+    padding: 0px !important;
+    pointer-events: all !important;
+    display: flex;
+}

src/frontend/package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "private": true,
   "dependencies": {
-    "@atyrode/excalidraw": "^0.18.0-2",
+    "@atyrode/excalidraw": "^0.18.0-3",
     "@monaco-editor/react": "^4.7.0",
     "@tanstack/react-query": "^5.74.3",
     "@tanstack/react-query-devtools": "^5.74.3",

src/frontend/src/CustomEmbeddableRenderer.scss

@@ -1,6 +1,34 @@
-.custom-rendered-embeddable {
+.custom-embed {
     height: 100%;
     width: 100%;
-    position: absolute;
-    z-index: 1;
-}
+    display: flex;
+    justify-content: center;
+    border: 0px !important;
+
+    &__title-bar {
+        position: absolute;
+        top: -30px;
+        pointer-events: none;
+
+        &__text {
+            font-family: 'Roboto', sans-serif;
+            color: #d3d3d3;
+            pointer-events: none;
+            font-size: 18px;
+        }
+    }
+
+    &__content {
+        height: 100%;
+        width: 100%;
+
+        &--iframe {
+            height: 100%;
+            width: 100%;
+            border: 0px !important;
+            overflow: hidden;
+            border-bottom-left-radius: var(--embeddable-radius);
+            border-bottom-right-radius: var(--embeddable-radius);
+        }
+    }
+}

src/frontend/src/CustomEmbeddableRenderer.tsx

@@ -19,29 +19,69 @@ export const renderCustomEmbeddable = (
 
   if (element.link && element.link.startsWith('!')) {
     let path = element.link.split('!')[1];
+    let content;
+    let title;
 
     switch (path) {
       case 'html':
-        return <HtmlEditor element={element} appState={appState} excalidrawAPI={excalidrawAPI} />;
+        content = <HtmlEditor element={element} appState={appState} excalidrawAPI={excalidrawAPI} />;
+        title = "HTML Editor";
       case 'editor':
-        return <Editor element={element} appState={appState} excalidrawAPI={excalidrawAPI} />;
+        content = <Editor element={element} appState={appState} excalidrawAPI={excalidrawAPI} />;
+        title = "Code Editor";
+        break;
       case 'state':
-        return <StateIndicator />;
+        content = <StateIndicator />;
+        title = "State Indicator";
+        break;
       case 'control':
-        return <ControlButton />;
+        content = <ControlButton />;
+        title = "Control Button";
+        break;
       case 'button':
-        return <ActionButton
+        content = <ActionButton
           target="code"
           element={element}
           excalidrawAPI={excalidrawAPI}
           settingsEnabled={true}
         />;
+        title = "Action Button";
+        break;
       case 'dashboard':
-        return <Dashboard element={element} appState={appState} excalidrawAPI={excalidrawAPI} />;
+        content = <Dashboard element={element} appState={appState} excalidrawAPI={excalidrawAPI} />;
+        title = "Dashboard";
+        break;
       default:
+        title = "Untitled";
         return null;
     }
+
+    if (element.customData?.title) {
+      title = element.customData.title;
+    }
+
+    return (
+      <div className="custom-embed">
+        <div className="custom-embed__title-bar">
+          <div className="custom-embed__title-bar__text">{title}</div>
+        </div>
+        <div className="custom-embed__content">
+          {content}
+        </div>
+      </div>
+    );
   } else {
-    return <iframe className="custom-rendered-embeddable" src={element.link} />;
+    const title = element.customData?.title || element.link || "Untitled";
+
+    return (
+      <div className="custom-embed">
+        <div className="custom-embed__title-bar">
+          <div className="custom-embed__title-bar__text">{title}</div>
+        </div>
+        <div className="custom-embed__content">
+          <iframe className="custom-embed__content--iframe" src={element.link} />
+        </div>
+      </div>
+    );
   }
 };

src/frontend/src/pad/editors/Editor.scss

@@ -10,8 +10,6 @@
     display: flex;
     justify-content: right;
     padding: 8px;
-    background-color: #1e1e1e;
-    border-bottom: 1px solid #333;
   }
 
   &__language-selector {

src/frontend/src/ui/MainMenu.tsx

@@ -53,8 +53,8 @@ export const MainMenuConfig: React.FC<MainMenuConfigProps> = ({
 
     const dashboardElement = ExcalidrawElementFactory.createEmbeddableElement({
       link: "!dashboard",
-      width: 460,
-      height: 80
+      width: 360,
+      height: 360
     });
 
     ExcalidrawElementFactory.placeInScene(dashboardElement, excalidrawAPI, {

src/frontend/src/utils/canvasUtils.ts

@@ -20,6 +20,15 @@ export function normalizeCanvasData(data: any) {
   if ("height" in appState) {
     delete appState.height;
   }
+
+  appState.pad = { 
+    moduleBorderOffset: {
+      left: 10,
+      right: 10,
+      top: 40,
+      bottom: 10,
+    },
+  };
 
   // Reset collaborators (https://github.com/excalidraw/excalidraw/issues/8637)
   appState.collaborators = new Map();

src/frontend/yarn.lock

@@ -2,10 +2,10 @@
 # yarn lockfile v1
 
 
-"@atyrode/excalidraw@^0.18.0-2":
-  version "0.18.0-2"
-  resolved "https://registry.yarnpkg.com/@atyrode/excalidraw/-/excalidraw-0.18.0-2.tgz#66be05d5b8a2458dd65fb58baa104fd803a41c5d"
-  integrity sha512-z3scC5BzVnu8ddS1TJTNxX+wPa3bj72j9RVleSV7iDZsClLDqgcrW+Z/cVHEphWpvBKlMzRo31vDdg+dqE6dDg==
+"@atyrode/excalidraw@^0.18.0-3":
+  version "0.18.0-3"
+  resolved "https://registry.yarnpkg.com/@atyrode/excalidraw/-/excalidraw-0.18.0-3.tgz#445176d5b9828f033205a46f227fd76e722019ec"
+  integrity sha512-iWLyYMZNV9VQCcWAtrLmg52NkfCw1CDrigXXRrxa3H2KW6nyrlbFm3KZAF5Y0mOJDYzAtxclPvHoTvcRruMjGg==
   dependencies:
     "@braintree/sanitize-url" "6.0.2"
     "@excalidraw/laser-pointer" "1.3.1"
@@ -537,29 +537,29 @@
   resolved "https://registry.yarnpkg.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.40.0.tgz#fd92d31a2931483c25677b9c6698106490cbbc76"
   integrity sha512-lpPE1cLfP5oPzVjKMx10pgBmKELQnFJXHgvtHCtuJWOv8MxqdEIMNtgHgBFf7Ea2/7EuVwa9fodWUfXAlXZLZQ==
 
-"@tanstack/query-core@5.74.4":
-  version "5.74.4"
-  resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.74.4.tgz#08c4f88f336738d822d9242c5e7d2be50f5c25b3"
-  integrity sha512-YuG0A0+3i9b2Gfo9fkmNnkUWh5+5cFhWBN0pJAHkHilTx6A0nv8kepkk4T4GRt4e5ahbtFj2eTtkiPcVU1xO4A==
+"@tanstack/query-core@5.74.7":
+  version "5.74.7"
+  resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.74.7.tgz#beb565a5f3d95a1e3bd756e5eb1e41c3eb48ae7f"
+  integrity sha512-X3StkN/Y6KGHndTjJf8H8th7AX4bKfbRpiVhVqevf0QWlxl6DhyJ0TYG3R0LARa/+xqDwzU9mA4pbJxzPCI29A==
 
-"@tanstack/query-devtools@5.74.6":
-  version "5.74.6"
-  resolved "https://registry.yarnpkg.com/@tanstack/query-devtools/-/query-devtools-5.74.6.tgz#88a29fac2ba3db6c9bda8f40808f808d7a88df0b"
-  integrity sha512-djaFT11mVCOW3e0Ezfyiq7T6OoHy2LRI1fUFQvj+G6+/4A1FkuRMNUhQkdP1GXlx8id0f1/zd5fgDpIy5SU/Iw==
+"@tanstack/query-devtools@5.74.7":
+  version "5.74.7"
+  resolved "https://registry.yarnpkg.com/@tanstack/query-devtools/-/query-devtools-5.74.7.tgz#c9b022b386ac86e6395228b5d6912e6444b3b971"
+  integrity sha512-nSNlfuGdnHf4yB0S+BoNYOE1o3oAH093weAYZolIHfS2stulyA/gWfSk/9H4ZFk5mAAHb5vNqAeJOmbdcGPEQw==
 
 "@tanstack/react-query-devtools@^5.74.3":
-  version "5.74.6"
-  resolved "https://registry.yarnpkg.com/@tanstack/react-query-devtools/-/react-query-devtools-5.74.6.tgz#169a3e2beab0c87ce3ebbda909bbd2c6590239f8"
-  integrity sha512-vlsDwz4/FsblK0h7VAlXUdJ+9OV+i1n8OLb8CLLAZqu0M9GCnbajytZwsRmns33PXBZ6wQBJ859kg6aajx+e9Q==
+  version "5.74.7"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query-devtools/-/react-query-devtools-5.74.7.tgz#97fd56ae76996467d544b546a1bd38aab4a94d1e"
+  integrity sha512-j60esTQF+ES0x52kQUYOX0Z8AJUcqCGANj6GaOf8J3YQz2bZPB1imLSw4SFeM3Ozv8uO/X/Dmh3IT1z+y57ZLQ==
   dependencies:
-    "@tanstack/query-devtools" "5.74.6"
+    "@tanstack/query-devtools" "5.74.7"
 
 "@tanstack/react-query@^5.74.3":
-  version "5.74.4"
-  resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.74.4.tgz#d73ee1899c08a227519cbf53b9a0e0b1e67cd3fe"
-  integrity sha512-mAbxw60d4ffQ4qmRYfkO1xzRBPUEf/72Dgo3qqea0J66nIKuDTLEqQt0ku++SDFlMGMnB6uKDnEG1xD/TDse4Q==
+  version "5.74.7"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.74.7.tgz#3507541b43de72399a19a71ff66828a12b859581"
+  integrity sha512-u4o/RIWnnrq26orGZu2NDPwmVof1vtAiiV6KYUXd49GuK+8HX+gyxoAYqIaZogvCE1cqOuZAhQKcrKGYGkrLxg==
   dependencies:
-    "@tanstack/query-core" "5.74.4"
+    "@tanstack/query-core" "5.74.7"
 
 "@types/d3-scale-chromatic@^3.0.0":
   version "3.1.0"
@@ -603,9 +603,9 @@
   integrity sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==
 
 "@types/node@^22.14.0":
-  version "22.15.1"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-22.15.1.tgz#4cd2c8717a61ae2979c6a0624b4d1b67415bf2c0"
-  integrity sha512-gSZyd0Qmv7qvbd2fJ9HGdYmv1yhNdelIA4YOtN6vkcmSwFhthxSEsBgU/JYZcXjWT6DFzoATcHrc52Ckh8SeRA==
+  version "22.15.2"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-22.15.2.tgz#1db55aa64618ee93a58c8912f74beefe44aca905"
+  integrity sha512-uKXqKN9beGoMdBfcaTY1ecwz6ctxuJAcUlwE55938g0ZJ8lRxwAZqRz2AJ4pzpt5dHdTPMB863UZ0ESiFUcP7A==
   dependencies:
     undici-types "~6.21.0"
 
@@ -1646,9 +1646,9 @@ postcss@^8.4.36:
     source-map-js "^1.2.1"
 
 posthog-js@^1.236.0:
-  version "1.236.6"
-  resolved "https://registry.yarnpkg.com/posthog-js/-/posthog-js-1.236.6.tgz#f4d73d25773f4e4bafd7632717c97b27bd9f1b7c"
-  integrity sha512-IX4fkn3HCK+ObdHr/AuWd+Ks7bgMpRpOQB93b5rDJAWkG4if4xFVUn5pgEjyCNeOO2GM1ECnp08q9tYNYEfwbA==
+  version "1.236.7"
+  resolved "https://registry.yarnpkg.com/posthog-js/-/posthog-js-1.236.7.tgz#6a071905d4466573b80fd52bad1d3478594805b7"
+  integrity sha512-HatTinqAt/6aAraCgbnP+2MTeVTChdf6TDsQkef4/yUnXeA4tsHmXnGGJ3vnzQk7N//R6lIHN189BZDO9kuKAg==
   dependencies:
     core-js "^3.38.1"
     fflate "^0.4.8"