From 2ad755016f20faee1aa1c83bf1680ff9fa9ed4f6 Mon Sep 17 00:00:00 2001
From: Aquino Luane <aquino@macareux.co.jp>
Date: Wed, 16 Oct 2024 16:27:53 +0900
Subject: [PATCH 01/16] poc: replace default scratch cat

---
 .../bcf454acf82e4504149f7ffe07081dbc.svg      | 51 ++++---------------
 src/lib/default-project/index.js              |  6 ---
 src/lib/default-project/project-data.js       |  9 ----
 src/lib/libraries/costumes.json               | 38 +-------------
 src/lib/libraries/sprites.json                | 48 +----------------
 5 files changed, 11 insertions(+), 141 deletions(-)

diff --git a/src/lib/default-project/bcf454acf82e4504149f7ffe07081dbc.svg b/src/lib/default-project/bcf454acf82e4504149f7ffe07081dbc.svg
index 03df23e29..e9c5b7578 100644
--- a/src/lib/default-project/bcf454acf82e4504149f7ffe07081dbc.svg
+++ b/src/lib/default-project/bcf454acf82e4504149f7ffe07081dbc.svg
@@ -1,42 +1,9 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="95.17898101806641" height="100.04156036376953" viewBox="0.3210171699523926 0.3000000357627869 95.17898101806641 100.04156036376953" version="1.1" xml:space="preserve">
-  <!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
-  <g>
-    <title>costume1.1</title>
-    <desc>Created with Sketch.</desc>
-    <g id="Page-1" stroke="none" fill-rule="evenodd">
-      <g id="costume1">
-        <g id="costume1.1">
-          <g id="tail">
-            <path d="M 21.9 73.8 C 19.5 73.3 16.6 72.5 14.2 70.3 C 8.7 65.4 7 57.3 3.2 59.4 C -0.7 61.5 -0.6 74.6 11.6 78.6 C 15.8 80 19.6 80 22.7 79.9 C 23.5 79.9 30.4 79.2 32.8 75.8 C 35.2 72.4 33.5 71.5 32.7 71.1 C 31.8 70.6 25.3 74.4 21.9 73.8 Z " stroke="#001026" stroke-width="1.2" fill="#FFAB19" stroke-linecap="round" stroke-linejoin="round"/>
-            <path d="M 3.8 59.6 C 1.8 60.2 0.8 64.4 1.8 67.9 C 2.8 71.4 4.4 73.2 5.7 74.5 C 5.5 73.8 5.1 71.6 6.8 70.3 C 8.9 68.6 12.6 69.5 12.6 69.5 C 12.6 69.5 9.5 65.7 7.9 63 C 6.3 60.7 5.8 59.2 3.8 59.6 Z " id="detail" fill="#FFFFFF" stroke-width="1"/>
-          </g>
-          <path d="M37.7,81.5 C35.9,82.7 29.7,87.1 21.8,89.6 L21.4,89.7 C21,89.8 20.8,90.3 21,90.7 C22.7,93.1 25.8,97.9 20.3,99.6 C15,101.3 5.1,87.2 9.3,83.5 C11.2,82.1 12.9,82.8 13.8,83.2 C14.3,83.4 14.8,83.4 15.3,83.3 C16.5,82.9 18.7,82.1 20.4,81.2 C24.7,79 25.7,78.1 27.7,76.6 C29.7,75.1 34.3,71.4 38,74.6 C41.2,77.3 39.4,80.3 37.7,81.5 Z" id="leg" stroke="#001026" stroke-width="1.2" fill="#FFAB19" stroke-linecap="round" stroke-linejoin="round"/>
-          <path d="M53.6,60.7 C54.1,61.1 60.2,68.3 62.2,66.5 C64.6,64.4 67.9,60.3 71.5,63.6 C75.1,66.9 68.3,72.5 65.4,74 C58.5,77.1 52.9,71.2 51.7,69.6 C50.5,68 48.4,65.3 48.4,62.7 C48.5,59.9 51.9,59.2 53.6,60.7 Z" id="arm" stroke="#001026" stroke-width="1.2" fill="#FFAB19" stroke-linecap="round" stroke-linejoin="round"/>
-          <g id="body-and-leg">
-            <path d="M 46.2 76.7 C 47.4 75.8 48.6 74.3 50.2 72 C 51.5 70.1 52.9 66.4 52.9 66.4 C 53.8 63.9 54.4 59.1 51.1 59.2 C 48.9 59.3 46.9 59 43.5 58.5 C 37.5 57.3 36.4 56.5 33.9 60.6 C 31.2 65.4 24.3 68.9 32.8 77.2 C 32.8 77.2 37.7 81 43.6 86.8 C 47.6 90.7 53.9 96.3 56.1 98.2 C 56.6 98.6 57.2 98.8 57.8 98.9 C 67.5 99.8 74.7 98.8 74.7 94.5 C 74.7 87.3 60.4 89.8 60.4 89.8 C 60.4 89.8 55.8 85.9 53.7 84 L 46.2 76.7 Z " id="body" stroke="#001026" stroke-width="1.2" fill="#FFAB19" stroke-linecap="round" stroke-linejoin="round"/>
-            <path d="M 50.6 70 C 50.6 70 52.5 67.5 48.2 64.8 C 43.7 61.9 42 65.1 40.2 67.5 C 38.2 70.6 40.2 72.1 42.2 73.9 C 43.8 75.4 45.3 76.6 45.3 76.6 C 45.3 76.6 48.4 74.5 50.6 70 Z " id="tummy" fill="#FFFFFF" stroke-width="1"/>
-          </g>
-          <path d="M30.2,68.4 C32.4,71.2 35.8,74.7 31.5,77.6 C25.6,80.9 20.7,70.9 19.7,67.4 C18.8,64.3 21.4,62.3 23.6,60.6 C27.9,57.5 31.5,54.7 35.5,56.2 C40.5,58 36.9,62 34.4,63.8 C32.9,64.9 31.4,66.1 30.3,66.8 C30,67.3 29.9,67.9 30.2,68.4 Z" id="arm" stroke="#001026" stroke-width="1.2" fill="#FFAB19" stroke-linecap="round" stroke-linejoin="round"/>
-          <g id="head">
-            <path d="M 53.1 9 C 50.8 8.6 48.4 8.4 45.6 8.6 C 40.9 8.8 36.4 10.5 36.4 10.5 L 24.3 2.6 C 23.9 2.4 23.4 2.7 23.5 3.1 L 25.6 21 C 26.2 20.2 15 33.8 22.1 45.2 C 29.2 56.6 44.3 61.7 63.1 58 C 81.9 54.3 86.3 43.5 85.1 37.8 C 83.9 32.1 76.8 30 76.8 30 C 76.8 30 76.7 25.5 73.5 20 C 71.6 16.7 65.2 12 65.2 12 L 62.6 1.3 C 62.5 0.9 62 0.8 61.7 1 L 53.1 9 Z " stroke="#001026" stroke-width="1.2" fill="#FFAB19"/>
-            <path d="M 76.5 30.4 C 76.5 30.4 83.4 32.2 84.6 37.9 C 85.8 43.6 81 53.9 62.4 57.5 C 38.2 62.5 26.7 48.1 33.4 37.5 C 40.1 26.8 51.6 35.9 60 35.3 C 67.2 34.8 68 28.5 76.5 30.4 Z " id="face" fill="#FFFFFF" stroke-width="1"/>
-            <path d="M 45 41.1 C 45 40.7 45.4 40.4 45.8 40.5 C 47.7 41.2 53.1 42.8 59.1 43.2 C 64.5 43.5 67.7 43.2 69.2 42.9 C 69.7 42.8 70.1 43.3 69.9 43.8 C 69 46.5 65.2 54 54.7 53.4 C 45.6 52.4 44.7 46 45 41.1 Z " id="mouth" stroke="#001026" stroke-width="1.2" fill="#FFFFFF" stroke-linecap="round" stroke-linejoin="round"/>
-            <path d="M 83 35.4 C 83 35.4 90.2 35.3 94.9 31.5 " id="whisker" stroke="#001026" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
-            <path d="M 83.4 41.3 C 83.4 41.3 87.3 43.2 93.6 42.7 " id="whisker" stroke="#001026" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
-            <path d="M 59.6 32.7 C 61.7 32.7 63.9 32.9 64 33.6 C 64.1 35 62.6 37.8 61 37.9 C 59.2 38.1 55 35.6 55 34 C 54.9 32.8 57.6 32.7 59.6 32.7 Z " id="nose" stroke="#001026" stroke-width="1.2" fill="#001026" stroke-linecap="round" stroke-linejoin="round"/>
-            <path d="M 14.6 31.2 C 14.6 31.2 23.2 34 26.7 37.1 " id="whisker" stroke="#001026" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
-            <path d="M 15.3 41.2 C 15.3 41.2 22.7 42.3 27 40.6 " id="whisker" stroke="#001026" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
-            <g id="eye">
-              <path d="M 71.4 21 C 74.3 25.5 74.4 30.6 71.6 32.4 C 68.8 34.2 64.2 32.1 61.2 27.6 C 58.3 23.1 58.2 18 61 16.2 C 63.8 14.3 68.5 16.5 71.4 21 Z " id="pupil" stroke="#001026" stroke-width="1.2" fill="#FFFFFF" stroke-linecap="round" stroke-linejoin="round"/>
-              <path d="M 71 26.7 C 71 27.8 70.2 28.7 69.2 28.7 C 68.2 28.7 67.4 27.8 67.4 26.7 C 67.4 25.6 68.2 24.7 69.2 24.7 C 70.2 24.7 71 25.6 71 26.7 " id="pupil" fill="#001026" stroke-width="1"/>
-            </g>
-            <g id="eye">
-              <path d="M 46.6 23.8 C 49.6 28.2 49.4 33.6 46.7 35.5 C 43.4 37.4 39 36 36 31.6 C 32.9 27.2 32.7 21.5 35.8 19.3 C 38.9 17 43.6 19.4 46.6 23.8 Z " stroke="#001026" stroke-width="1.2" fill="#FFFFFF" stroke-linecap="round" stroke-linejoin="round"/>
-              <path d="M 46 29.6 C 46 30.7 45.2 31.6 44.2 31.6 C 43.2 31.6 42.4 30.7 42.4 29.6 C 42.4 28.5 43.2 27.6 44.2 27.6 C 45.2 27.7 46 28.5 46 29.6 " id="pupil" fill="#001026" stroke-width="1"/>
-            </g>
-          </g>
-        </g>
-      </g>
-    </g>
-  </g>
-</svg>
\ No newline at end of file
+<svg width="96" height="98" viewBox="0 0 96 98" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M64.8066 21.2576C64.4286 16.3561 61.3433 13.0414 59.2743 11.3471C58.646 10.8329 57.726 11.3225 57.7648 12.1502C57.8637 14.2409 57.9901 17.6217 57.3492 21.1592C57.2404 21.7628 57.6384 22.2589 58.2329 22.2589H63.9004C64.4249 22.2589 64.8467 21.7978 64.8054 21.2563L64.8066 21.2576Z" fill="black"/>
+<path d="M51.6116 95.5558C53.6681 93.6245 53.6781 92.4238 52.0297 90.8681C51.2562 90.1375 50.1597 89.8953 49.1496 90.1803L40.1364 95.4043C39.5982 95.5558 39.7046 96.3771 40.2629 96.3771H49.5314C50.2974 96.3771 51.0446 96.0882 51.6116 95.5558Z" fill="#EA5514"/>
+<path d="M58.3819 82.784C64.8992 79.0613 69.8383 70.9124 70.5016 62.8439C70.5354 62.4306 71.1087 62.3944 71.1963 62.7985C73.4017 72.9435 71.6344 81.0055 58.6159 83.4589C58.2266 83.5327 58.0351 82.9809 58.3806 82.784H58.3819Z" fill="black"/>
+<path d="M35.5904 90.2619C34.7155 90.5974 31.7078 91.7515 30.0494 92.3707C29.8153 92.4575 29.7665 92.7735 29.958 92.938L33.1722 95.7281C33.763 96.2333 34.5165 96.5027 35.2825 96.4652C38.0562 96.3305 38.8022 95.4108 38.488 93.1258C38.3516 92.1362 37.0248 90.837 36.0698 90.2904C35.9209 90.2049 35.7494 90.201 35.5904 90.2619Z" fill="#EA5514"/>
+<path d="M63.4047 42.6602H62.3559C61.108 42.6602 59.9777 42.6304 58.9388 42.5708C58.3568 42.6356 57.7673 42.6705 57.1702 42.6705C47.4011 42.6705 39.4818 33.751 39.4818 22.7485C39.4818 11.7461 47.3998 2.82781 57.1702 2.82781C59.9189 2.82781 62.5211 3.53375 64.8417 4.7941C64.8417 4.7941 64.8429 4.7941 64.8442 4.7941C65.2247 4.98063 65.5488 4.45991 65.2247 4.18141C62.7414 2.04414 59.6711 0.731978 56.1952 0.222918C42.5772 -1.77058 30.6902 9.80051 31.117 24.027C31.2597 28.7782 31.9644 32.4155 32.7116 35.2756C33.8068 39.4737 33.0696 43.9594 30.754 47.5889L0.153522 95.5468C-0.27079 96.2113 0.218608 97.0895 0.987126 97.0506C13.0944 96.4406 24.0527 94.153 33.4902 89.6453C37.8472 87.5637 40.6233 83.0327 40.6233 78.0677V73.1378C40.6233 58.9035 52.3251 47.3402 66.0432 47.1316C66.2573 47.1277 66.4212 46.9347 66.3887 46.7171C66.1233 44.9646 64.3084 42.7003 63.4035 42.6641L63.4047 42.6602Z" fill="black"/>
+<path d="M71.8484 6.24743C71.5468 6.15935 71.3791 6.59458 71.6569 6.74613C80.401 11.5025 85.8833 18.8263 85.8833 22.7498C85.8833 26.6733 80.391 34.0113 71.6319 38.7664C71.354 38.9167 71.5205 39.3532 71.8234 39.2651C87.3777 34.7639 95.9966 26.2744 95.9966 22.7498C95.9966 19.2252 87.364 10.7538 71.8484 6.24743Z" fill="#EA5514"/>
+<path d="M75.6134 12.079C74.4256 11.1503 72.8047 10.013 70.797 8.90677C70.4578 8.72024 70.1111 9.14511 70.3514 9.45598C73.1714 13.1023 74.8599 17.7253 74.8599 22.7486C74.8599 27.7718 73.1714 32.3948 70.3514 36.0411C70.1111 36.3507 70.4578 36.7769 70.797 36.5903C72.8059 35.4841 74.4268 34.3468 75.6134 33.4181C81.1345 29.0995 83.6178 24.5788 83.6178 22.7473C83.6178 20.9157 81.1345 16.395 75.6134 12.0764V12.079Z" fill="#F8B62D"/>
+</svg>
diff --git a/src/lib/default-project/index.js b/src/lib/default-project/index.js
index 6e733f705..af98632da 100644
--- a/src/lib/default-project/index.js
+++ b/src/lib/default-project/index.js
@@ -5,7 +5,6 @@ import popWav from '!arraybuffer-loader!./83a9787d4cb6f3b7632b4ddfebf74367.wav';
 import meowWav from '!arraybuffer-loader!./83c36d806dc92327b9e7049a565c6bff.wav';
 import backdrop from '!raw-loader!./cd21514d0531fdffb22204e0ec5ed84a.svg';
 import costume1 from '!raw-loader!./bcf454acf82e4504149f7ffe07081dbc.svg';
-import costume2 from '!raw-loader!./0fb9be3e8397c983338cb71dc84d0b25.svg';
 /* eslint-enable import/no-unresolved */
 
 const defaultProject = translator => {
@@ -44,11 +43,6 @@ const defaultProject = translator => {
         assetType: 'ImageVector',
         dataFormat: 'SVG',
         data: encoder.encode(costume1)
-    }, {
-        id: '0fb9be3e8397c983338cb71dc84d0b25',
-        assetType: 'ImageVector',
-        dataFormat: 'SVG',
-        data: encoder.encode(costume2)
     }];
 };
 
diff --git a/src/lib/default-project/project-data.js b/src/lib/default-project/project-data.js
index 9ee63b237..e6e5dfe0f 100644
--- a/src/lib/default-project/project-data.js
+++ b/src/lib/default-project/project-data.js
@@ -81,15 +81,6 @@ const projectData = translateFunction => {
                         dataFormat: 'svg',
                         rotationCenterX: 48,
                         rotationCenterY: 50
-                    },
-                    {
-                        assetId: '0fb9be3e8397c983338cb71dc84d0b25',
-                        name: translator(messages.costume, {index: 2}),
-                        bitmapResolution: 1,
-                        md5ext: '0fb9be3e8397c983338cb71dc84d0b25.svg',
-                        dataFormat: 'svg',
-                        rotationCenterX: 46,
-                        rotationCenterY: 53
                     }
                 ],
                 sounds: [
diff --git a/src/lib/libraries/costumes.json b/src/lib/libraries/costumes.json
index 6abccd68a..7484b9910 100644
--- a/src/lib/libraries/costumes.json
+++ b/src/lib/libraries/costumes.json
@@ -1692,42 +1692,6 @@
         "rotationCenterX": 44,
         "rotationCenterY": 46
     },
-    {
-        "name": "Cat-a",
-        "tags": [
-            "animals",
-            "cat",
-            "kitten",
-            "kitty",
-            "mammal",
-            "orange",
-            "scratch cat"
-        ],
-        "assetId": "bcf454acf82e4504149f7ffe07081dbc",
-        "bitmapResolution": 1,
-        "dataFormat": "svg",
-        "md5ext": "bcf454acf82e4504149f7ffe07081dbc.svg",
-        "rotationCenterX": 48,
-        "rotationCenterY": 50
-    },
-    {
-        "name": "Cat-b",
-        "tags": [
-            "animals",
-            "cat",
-            "kitten",
-            "kitty",
-            "mammal",
-            "orange",
-            "scratch cat"
-        ],
-        "assetId": "0fb9be3e8397c983338cb71dc84d0b25",
-        "bitmapResolution": 1,
-        "dataFormat": "svg",
-        "md5ext": "0fb9be3e8397c983338cb71dc84d0b25.svg",
-        "rotationCenterX": 46,
-        "rotationCenterY": 53
-    },
     {
         "name": "Catcher-a",
         "tags": [
@@ -12819,4 +12783,4 @@
         "rotationCenterX": 17,
         "rotationCenterY": 23
     }
-]
\ No newline at end of file
+]
diff --git a/src/lib/libraries/sprites.json b/src/lib/libraries/sprites.json
index be4cb21fa..ea4a1646c 100644
--- a/src/lib/libraries/sprites.json
+++ b/src/lib/libraries/sprites.json
@@ -2027,52 +2027,6 @@
         ],
         "blocks": {}
     },
-    {
-        "name": "Cat",
-        "tags": [
-            "animals",
-            "cat",
-            "kitten",
-            "kitty",
-            "mammal",
-            "orange",
-            "scratch cat"
-        ],
-        "isStage": false,
-        "variables": {},
-        "costumes": [
-            {
-                "assetId": "bcf454acf82e4504149f7ffe07081dbc",
-                "name": "cat-a",
-                "bitmapResolution": 1,
-                "md5ext": "bcf454acf82e4504149f7ffe07081dbc.svg",
-                "dataFormat": "svg",
-                "rotationCenterX": 48,
-                "rotationCenterY": 50
-            },
-            {
-                "assetId": "0fb9be3e8397c983338cb71dc84d0b25",
-                "name": "cat-b",
-                "bitmapResolution": 1,
-                "md5ext": "0fb9be3e8397c983338cb71dc84d0b25.svg",
-                "dataFormat": "svg",
-                "rotationCenterX": 46,
-                "rotationCenterY": 53
-            }
-        ],
-        "sounds": [
-            {
-                "assetId": "83c36d806dc92327b9e7049a565c6bff",
-                "name": "Meow",
-                "dataFormat": "wav",
-                "format": "",
-                "rate": 44100,
-                "sampleCount": 37376,
-                "md5ext": "83c36d806dc92327b9e7049a565c6bff.wav"
-            }
-        ],
-        "blocks": {}
-    },
     {
         "name": "Cat 2",
         "tags": [
@@ -17203,4 +17157,4 @@
         ],
         "blocks": {}
     }
-]
\ No newline at end of file
+]

From 36032a0fa058bfe510ed936b94177b577893db46 Mon Sep 17 00:00:00 2001
From: Aquino Luane <aquino@macareux.co.jp>
Date: Wed, 11 Dec 2024 14:44:59 +0900
Subject: [PATCH 02/16] feat(extension): show extension when loads default
 project

---
 src/components/gui/gui.jsx | 23 ++++++++++++++++-------
 src/containers/gui.jsx     |  2 +-
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/components/gui/gui.jsx b/src/components/gui/gui.jsx
index a44604898..d8cc1e220 100644
--- a/src/components/gui/gui.jsx
+++ b/src/components/gui/gui.jsx
@@ -100,7 +100,7 @@ const GUIComponent = props => {
         onActivateSoundsTab,
         onActivateTab,
         onClickLogo,
-        onExtensionButtonClick,
+        showExtension,
         onProjectTelemetryEvent,
         onRequestCloseBackdropLibrary,
         onRequestCloseCostumeLibrary,
@@ -112,6 +112,7 @@ const GUIComponent = props => {
         onTelemetryModalCancel,
         onTelemetryModalOptIn,
         onTelemetryModalOptOut,
+        projectId,
         showComingSoon,
         soundsTabVisible,
         stageSizeMode,
@@ -125,6 +126,10 @@ const GUIComponent = props => {
         return <Box {...componentProps}>{children}</Box>;
     }
 
+    if(projectId === '0'){
+        showExtension();
+     }
+
     const tabClassNames = {
         tabs: styles.tabs,
         tab: classNames(tabStyles.reactTabsTab, styles.tab),
@@ -314,7 +319,7 @@ const GUIComponent = props => {
                                         <button
                                             className={styles.extensionButton}
                                             title={intl.formatMessage(messages.addExtension)}
-                                            onClick={onExtensionButtonClick}
+                                            onClick={showExtension}
                                         >
                                             <img
                                                 className={styles.extensionButtonIcon}
@@ -401,7 +406,7 @@ GUIComponent.propTypes = {
     onClickAccountNav: PropTypes.func,
     onClickLogo: PropTypes.func,
     onCloseAccountNav: PropTypes.func,
-    onExtensionButtonClick: PropTypes.func,
+    showExtension: PropTypes.func,
     onLogOut: PropTypes.func,
     onOpenRegistration: PropTypes.func,
     onRequestCloseBackdropLibrary: PropTypes.func,
@@ -416,6 +421,7 @@ GUIComponent.propTypes = {
     onTelemetryModalOptIn: PropTypes.func,
     onTelemetryModalOptOut: PropTypes.func,
     onToggleLoginOpen: PropTypes.func,
+    projectId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     renderLogin: PropTypes.func,
     showComingSoon: PropTypes.bool,
     soundsTabVisible: PropTypes.bool,
@@ -446,10 +452,13 @@ GUIComponent.defaultProps = {
     stageSizeMode: STAGE_SIZE_MODES.large
 };
 
-const mapStateToProps = state => ({
-    // This is the button's mode, as opposed to the actual current state
-    stageSizeMode: state.scratchGui.stageSize.stageSize
-});
+const mapStateToProps = state => {
+    return {
+        // This is the button's mode, as opposed to the actual current state
+        stageSizeMode: state.scratchGui.stageSize.stageSize,
+        projectId: state.scratchGui.projectState.projectId,
+    }
+};
 
 export default injectIntl(connect(
     mapStateToProps
diff --git a/src/containers/gui.jsx b/src/containers/gui.jsx
index c10df0fb3..20a608c50 100644
--- a/src/containers/gui.jsx
+++ b/src/containers/gui.jsx
@@ -155,7 +155,7 @@ const mapStateToProps = state => {
 };
 
 const mapDispatchToProps = dispatch => ({
-    onExtensionButtonClick: () => dispatch(openExtensionLibrary()),
+    showExtension: () => dispatch(openExtensionLibrary()),
     onActivateTab: tab => dispatch(activateTab(tab)),
     onActivateCostumesTab: () => dispatch(activateTab(COSTUMES_TAB_INDEX)),
     onActivateSoundsTab: () => dispatch(activateTab(SOUNDS_TAB_INDEX)),

From 1ff56ec8b92783a11f6ce8762095d225a38ad557 Mon Sep 17 00:00:00 2001
From: Aquino Luane <aquino@macareux.co.jp>
Date: Wed, 11 Dec 2024 14:50:21 +0900
Subject: [PATCH 03/16] feat(extension): show only takamatsu extension

---
 src/lib/libraries/extensions/index.jsx | 273 +------------------------
 1 file changed, 1 insertion(+), 272 deletions(-)

diff --git a/src/lib/libraries/extensions/index.jsx b/src/lib/libraries/extensions/index.jsx
index 63a101078..1330a7132 100644
--- a/src/lib/libraries/extensions/index.jsx
+++ b/src/lib/libraries/extensions/index.jsx
@@ -69,276 +69,5 @@ export default [
             />
         ),
         featured: true
-    },
-    {
-        name: (
-            <FormattedMessage
-                defaultMessage="Music"
-                description="Name for the 'Music' extension"
-                id="gui.extension.music.name"
-            />
-        ),
-        extensionId: 'music',
-        iconURL: musicIconURL,
-        insetIconURL: musicInsetIconURL,
-        description: (
-            <FormattedMessage
-                defaultMessage="Play instruments and drums."
-                description="Description for the 'Music' extension"
-                id="gui.extension.music.description"
-            />
-        ),
-        featured: true
-    },
-    {
-        name: (
-            <FormattedMessage
-                defaultMessage="Pen"
-                description="Name for the 'Pen' extension"
-                id="gui.extension.pen.name"
-            />
-        ),
-        extensionId: 'pen',
-        iconURL: penIconURL,
-        insetIconURL: penInsetIconURL,
-        description: (
-            <FormattedMessage
-                defaultMessage="Draw with your sprites."
-                description="Description for the 'Pen' extension"
-                id="gui.extension.pen.description"
-            />
-        ),
-        featured: true
-    },
-    {
-        name: (
-            <FormattedMessage
-                defaultMessage="Video Sensing"
-                description="Name for the 'Video Sensing' extension"
-                id="gui.extension.videosensing.name"
-            />
-        ),
-        extensionId: 'videoSensing',
-        iconURL: videoSensingIconURL,
-        insetIconURL: videoSensingInsetIconURL,
-        description: (
-            <FormattedMessage
-                defaultMessage="Sense motion with the camera."
-                description="Description for the 'Video Sensing' extension"
-                id="gui.extension.videosensing.description"
-            />
-        ),
-        featured: true
-    },
-    {
-        name: (
-            <FormattedMessage
-                defaultMessage="Text to Speech"
-                description="Name for the Text to Speech extension"
-                id="gui.extension.text2speech.name"
-            />
-        ),
-        extensionId: 'text2speech',
-        collaborator: 'Amazon Web Services',
-        iconURL: text2speechIconURL,
-        insetIconURL: text2speechInsetIconURL,
-        description: (
-            <FormattedMessage
-                defaultMessage="Make your projects talk."
-                description="Description for the Text to speech extension"
-                id="gui.extension.text2speech.description"
-            />
-        ),
-        featured: true,
-        internetConnectionRequired: true
-    },
-    {
-        name: (
-            <FormattedMessage
-                defaultMessage="Translate"
-                description="Name for the Translate extension"
-                id="gui.extension.translate.name"
-            />
-        ),
-        extensionId: 'translate',
-        collaborator: 'Google',
-        iconURL: translateIconURL,
-        insetIconURL: translateInsetIconURL,
-        description: (
-            <FormattedMessage
-                defaultMessage="Translate text into many languages."
-                description="Description for the Translate extension"
-                id="gui.extension.translate.description"
-            />
-        ),
-        featured: true,
-        internetConnectionRequired: true
-    },
-    {
-        name: 'Makey Makey',
-        extensionId: 'makeymakey',
-        collaborator: 'JoyLabz',
-        iconURL: makeymakeyIconURL,
-        insetIconURL: makeymakeyInsetIconURL,
-        description: (
-            <FormattedMessage
-                defaultMessage="Make anything into a key."
-                description="Description for the 'Makey Makey' extension"
-                id="gui.extension.makeymakey.description"
-            />
-        ),
-        featured: true
-    },
-    {
-        name: 'micro:bit',
-        extensionId: 'microbit',
-        collaborator: 'micro:bit',
-        iconURL: microbitIconURL,
-        insetIconURL: microbitInsetIconURL,
-        description: (
-            <FormattedMessage
-                defaultMessage="Connect your projects with the world."
-                description="Description for the 'micro:bit' extension"
-                id="gui.extension.microbit.description"
-            />
-        ),
-        featured: true,
-        disabled: false,
-        bluetoothRequired: true,
-        internetConnectionRequired: true,
-        launchPeripheralConnectionFlow: true,
-        useAutoScan: false,
-        connectionIconURL: microbitConnectionIconURL,
-        connectionSmallIconURL: microbitConnectionSmallIconURL,
-        connectingMessage: (
-            <FormattedMessage
-                defaultMessage="Connecting"
-                description="Message to help people connect to their micro:bit."
-                id="gui.extension.microbit.connectingMessage"
-            />
-        ),
-        helpLink: 'https://scratch.mit.edu/microbit'
-    },
-    {
-        name: 'LEGO MINDSTORMS EV3',
-        extensionId: 'ev3',
-        collaborator: 'LEGO',
-        iconURL: ev3IconURL,
-        insetIconURL: ev3InsetIconURL,
-        description: (
-            <FormattedMessage
-                defaultMessage="Build interactive robots and more."
-                description="Description for the 'LEGO MINDSTORMS EV3' extension"
-                id="gui.extension.ev3.description"
-            />
-        ),
-        featured: true,
-        disabled: false,
-        bluetoothRequired: true,
-        internetConnectionRequired: true,
-        launchPeripheralConnectionFlow: true,
-        useAutoScan: false,
-        connectionIconURL: ev3ConnectionIconURL,
-        connectionSmallIconURL: ev3ConnectionSmallIconURL,
-        connectingMessage: (
-            <FormattedMessage
-                defaultMessage="Connecting. Make sure the pin on your EV3 is set to 1234."
-                description="Message to help people connect to their EV3. Must note the PIN should be 1234."
-                id="gui.extension.ev3.connectingMessage"
-            />
-        ),
-        helpLink: 'https://scratch.mit.edu/ev3'
-    },
-    {
-        name: 'LEGO BOOST',
-        extensionId: 'boost',
-        collaborator: 'LEGO',
-        iconURL: boostIconURL,
-        insetIconURL: boostInsetIconURL,
-        description: (
-            <FormattedMessage
-                defaultMessage="Bring robotic creations to life."
-                description="Description for the 'LEGO BOOST' extension"
-                id="gui.extension.boost.description"
-            />
-        ),
-        featured: true,
-        disabled: false,
-        bluetoothRequired: true,
-        internetConnectionRequired: true,
-        launchPeripheralConnectionFlow: true,
-        useAutoScan: true,
-        connectionIconURL: boostConnectionIconURL,
-        connectionSmallIconURL: boostConnectionSmallIconURL,
-        connectionTipIconURL: boostConnectionTipIconURL,
-        connectingMessage: (
-            <FormattedMessage
-                defaultMessage="Connecting"
-                description="Message to help people connect to their BOOST."
-                id="gui.extension.boost.connectingMessage"
-            />
-        ),
-        helpLink: 'https://scratch.mit.edu/boost'
-    },
-    {
-        name: 'LEGO Education WeDo 2.0',
-        extensionId: 'wedo2',
-        collaborator: 'LEGO',
-        iconURL: wedo2IconURL,
-        insetIconURL: wedo2InsetIconURL,
-        description: (
-            <FormattedMessage
-                defaultMessage="Build with motors and sensors."
-                description="Description for the 'LEGO WeDo 2.0' extension"
-                id="gui.extension.wedo2.description"
-            />
-        ),
-        featured: true,
-        disabled: false,
-        bluetoothRequired: true,
-        internetConnectionRequired: true,
-        launchPeripheralConnectionFlow: true,
-        useAutoScan: true,
-        connectionIconURL: wedo2ConnectionIconURL,
-        connectionSmallIconURL: wedo2ConnectionSmallIconURL,
-        connectionTipIconURL: wedo2ConnectionTipIconURL,
-        connectingMessage: (
-            <FormattedMessage
-                defaultMessage="Connecting"
-                description="Message to help people connect to their WeDo."
-                id="gui.extension.wedo2.connectingMessage"
-            />
-        ),
-        helpLink: 'https://scratch.mit.edu/wedo'
-    },
-    {
-        name: 'Go Direct Force & Acceleration',
-        extensionId: 'gdxfor',
-        collaborator: 'Vernier',
-        iconURL: gdxforIconURL,
-        insetIconURL: gdxforInsetIconURL,
-        description: (
-            <FormattedMessage
-                defaultMessage="Sense push, pull, motion, and spin."
-                description="Description for the Vernier Go Direct Force and Acceleration sensor extension"
-                id="gui.extension.gdxfor.description"
-            />
-        ),
-        featured: true,
-        disabled: false,
-        bluetoothRequired: true,
-        internetConnectionRequired: true,
-        launchPeripheralConnectionFlow: true,
-        useAutoScan: false,
-        connectionIconURL: gdxforConnectionIconURL,
-        connectionSmallIconURL: gdxforConnectionSmallIconURL,
-        connectingMessage: (
-            <FormattedMessage
-                defaultMessage="Connecting"
-                description="Message to help people connect to their force and acceleration sensor."
-                id="gui.extension.gdxfor.connectingMessage"
-            />
-        ),
-        helpLink: 'https://scratch.mit.edu/vernier'
-    },
+    }
 ];

From 60bd83b78d74004c37c638a55b43fc8334cb6ab5 Mon Sep 17 00:00:00 2001
From: Aquino Luane <aquino@macareux.co.jp>
Date: Wed, 11 Dec 2024 14:51:18 +0900
Subject: [PATCH 04/16] refactor(extension): remove unused imports

---
 src/lib/libraries/extensions/index.jsx | 45 --------------------------
 1 file changed, 45 deletions(-)

diff --git a/src/lib/libraries/extensions/index.jsx b/src/lib/libraries/extensions/index.jsx
index 1330a7132..fbfc3bec4 100644
--- a/src/lib/libraries/extensions/index.jsx
+++ b/src/lib/libraries/extensions/index.jsx
@@ -1,51 +1,6 @@
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
-import musicIconURL from './music/music.png';
-import musicInsetIconURL from './music/music-small.svg';
-
-import penIconURL from './pen/pen.png';
-import penInsetIconURL from './pen/pen-small.svg';
-
-import videoSensingIconURL from './videoSensing/video-sensing.png';
-import videoSensingInsetIconURL from './videoSensing/video-sensing-small.svg';
-
-import text2speechIconURL from './text2speech/text2speech.png';
-import text2speechInsetIconURL from './text2speech/text2speech-small.svg';
-
-import translateIconURL from './translate/translate.png';
-import translateInsetIconURL from './translate/translate-small.png';
-
-import makeymakeyIconURL from './makeymakey/makeymakey.png';
-import makeymakeyInsetIconURL from './makeymakey/makeymakey-small.svg';
-
-import microbitIconURL from './microbit/microbit.png';
-import microbitInsetIconURL from './microbit/microbit-small.svg';
-import microbitConnectionIconURL from './microbit/microbit-illustration.svg';
-import microbitConnectionSmallIconURL from './microbit/microbit-small.svg';
-
-import ev3IconURL from './ev3/ev3.png';
-import ev3InsetIconURL from './ev3/ev3-small.svg';
-import ev3ConnectionIconURL from './ev3/ev3-hub-illustration.svg';
-import ev3ConnectionSmallIconURL from './ev3/ev3-small.svg';
-
-import wedo2IconURL from './wedo2/wedo.png'; // TODO: Rename file names to match variable/prop names?
-import wedo2InsetIconURL from './wedo2/wedo-small.svg';
-import wedo2ConnectionIconURL from './wedo2/wedo-illustration.svg';
-import wedo2ConnectionSmallIconURL from './wedo2/wedo-small.svg';
-import wedo2ConnectionTipIconURL from './wedo2/wedo-button-illustration.svg';
-
-import boostIconURL from './boost/boost.png';
-import boostInsetIconURL from './boost/boost-small.svg';
-import boostConnectionIconURL from './boost/boost-illustration.svg';
-import boostConnectionSmallIconURL from './boost/boost-small.svg';
-import boostConnectionTipIconURL from './boost/boost-button-illustration.svg';
-
-import gdxforIconURL from './gdxfor/gdxfor.png';
-import gdxforInsetIconURL from './gdxfor/gdxfor-small.svg';
-import gdxforConnectionIconURL from './gdxfor/gdxfor-illustration.svg';
-import gdxforConnectionSmallIconURL from './gdxfor/gdxfor-small.svg';
-
 import geoloniaIconURL from './geolonia/geolonia.png';
 import geoloniaInsetIconURL from './geolonia/geolonia-small.png';
 

From 4665774f8294a02b66c2dd6ea0125e513a06db39 Mon Sep 17 00:00:00 2001
From: Aquino Luane <aquino@macareux.co.jp>
Date: Thu, 12 Dec 2024 14:26:59 +0900
Subject: [PATCH 05/16] feat(extension): show only takamatsu extension

---
 src/lib/libraries/extensions/index.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/libraries/extensions/index.jsx b/src/lib/libraries/extensions/index.jsx
index fbfc3bec4..0167d5608 100644
--- a/src/lib/libraries/extensions/index.jsx
+++ b/src/lib/libraries/extensions/index.jsx
@@ -24,5 +24,5 @@ export default [
             />
         ),
         featured: true
-    }
-];
+    },
+]

From 79eb2e701a55319fe181be673216b4cca730081b Mon Sep 17 00:00:00 2001
From: Aquino Luane <aquino@macareux.co.jp>
Date: Thu, 12 Dec 2024 17:22:17 +0900
Subject: [PATCH 06/16] fix(extension): remove extensions not needed

---
 extensions/geolonia/gui/index.jsx      | 273 +------------------------
 src/lib/libraries/extensions/index.jsx |  45 ++++
 2 files changed, 46 insertions(+), 272 deletions(-)

diff --git a/extensions/geolonia/gui/index.jsx b/extensions/geolonia/gui/index.jsx
index 63a101078..5c1c6656b 100644
--- a/extensions/geolonia/gui/index.jsx
+++ b/extensions/geolonia/gui/index.jsx
@@ -70,275 +70,4 @@ export default [
         ),
         featured: true
     },
-    {
-        name: (
-            <FormattedMessage
-                defaultMessage="Music"
-                description="Name for the 'Music' extension"
-                id="gui.extension.music.name"
-            />
-        ),
-        extensionId: 'music',
-        iconURL: musicIconURL,
-        insetIconURL: musicInsetIconURL,
-        description: (
-            <FormattedMessage
-                defaultMessage="Play instruments and drums."
-                description="Description for the 'Music' extension"
-                id="gui.extension.music.description"
-            />
-        ),
-        featured: true
-    },
-    {
-        name: (
-            <FormattedMessage
-                defaultMessage="Pen"
-                description="Name for the 'Pen' extension"
-                id="gui.extension.pen.name"
-            />
-        ),
-        extensionId: 'pen',
-        iconURL: penIconURL,
-        insetIconURL: penInsetIconURL,
-        description: (
-            <FormattedMessage
-                defaultMessage="Draw with your sprites."
-                description="Description for the 'Pen' extension"
-                id="gui.extension.pen.description"
-            />
-        ),
-        featured: true
-    },
-    {
-        name: (
-            <FormattedMessage
-                defaultMessage="Video Sensing"
-                description="Name for the 'Video Sensing' extension"
-                id="gui.extension.videosensing.name"
-            />
-        ),
-        extensionId: 'videoSensing',
-        iconURL: videoSensingIconURL,
-        insetIconURL: videoSensingInsetIconURL,
-        description: (
-            <FormattedMessage
-                defaultMessage="Sense motion with the camera."
-                description="Description for the 'Video Sensing' extension"
-                id="gui.extension.videosensing.description"
-            />
-        ),
-        featured: true
-    },
-    {
-        name: (
-            <FormattedMessage
-                defaultMessage="Text to Speech"
-                description="Name for the Text to Speech extension"
-                id="gui.extension.text2speech.name"
-            />
-        ),
-        extensionId: 'text2speech',
-        collaborator: 'Amazon Web Services',
-        iconURL: text2speechIconURL,
-        insetIconURL: text2speechInsetIconURL,
-        description: (
-            <FormattedMessage
-                defaultMessage="Make your projects talk."
-                description="Description for the Text to speech extension"
-                id="gui.extension.text2speech.description"
-            />
-        ),
-        featured: true,
-        internetConnectionRequired: true
-    },
-    {
-        name: (
-            <FormattedMessage
-                defaultMessage="Translate"
-                description="Name for the Translate extension"
-                id="gui.extension.translate.name"
-            />
-        ),
-        extensionId: 'translate',
-        collaborator: 'Google',
-        iconURL: translateIconURL,
-        insetIconURL: translateInsetIconURL,
-        description: (
-            <FormattedMessage
-                defaultMessage="Translate text into many languages."
-                description="Description for the Translate extension"
-                id="gui.extension.translate.description"
-            />
-        ),
-        featured: true,
-        internetConnectionRequired: true
-    },
-    {
-        name: 'Makey Makey',
-        extensionId: 'makeymakey',
-        collaborator: 'JoyLabz',
-        iconURL: makeymakeyIconURL,
-        insetIconURL: makeymakeyInsetIconURL,
-        description: (
-            <FormattedMessage
-                defaultMessage="Make anything into a key."
-                description="Description for the 'Makey Makey' extension"
-                id="gui.extension.makeymakey.description"
-            />
-        ),
-        featured: true
-    },
-    {
-        name: 'micro:bit',
-        extensionId: 'microbit',
-        collaborator: 'micro:bit',
-        iconURL: microbitIconURL,
-        insetIconURL: microbitInsetIconURL,
-        description: (
-            <FormattedMessage
-                defaultMessage="Connect your projects with the world."
-                description="Description for the 'micro:bit' extension"
-                id="gui.extension.microbit.description"
-            />
-        ),
-        featured: true,
-        disabled: false,
-        bluetoothRequired: true,
-        internetConnectionRequired: true,
-        launchPeripheralConnectionFlow: true,
-        useAutoScan: false,
-        connectionIconURL: microbitConnectionIconURL,
-        connectionSmallIconURL: microbitConnectionSmallIconURL,
-        connectingMessage: (
-            <FormattedMessage
-                defaultMessage="Connecting"
-                description="Message to help people connect to their micro:bit."
-                id="gui.extension.microbit.connectingMessage"
-            />
-        ),
-        helpLink: 'https://scratch.mit.edu/microbit'
-    },
-    {
-        name: 'LEGO MINDSTORMS EV3',
-        extensionId: 'ev3',
-        collaborator: 'LEGO',
-        iconURL: ev3IconURL,
-        insetIconURL: ev3InsetIconURL,
-        description: (
-            <FormattedMessage
-                defaultMessage="Build interactive robots and more."
-                description="Description for the 'LEGO MINDSTORMS EV3' extension"
-                id="gui.extension.ev3.description"
-            />
-        ),
-        featured: true,
-        disabled: false,
-        bluetoothRequired: true,
-        internetConnectionRequired: true,
-        launchPeripheralConnectionFlow: true,
-        useAutoScan: false,
-        connectionIconURL: ev3ConnectionIconURL,
-        connectionSmallIconURL: ev3ConnectionSmallIconURL,
-        connectingMessage: (
-            <FormattedMessage
-                defaultMessage="Connecting. Make sure the pin on your EV3 is set to 1234."
-                description="Message to help people connect to their EV3. Must note the PIN should be 1234."
-                id="gui.extension.ev3.connectingMessage"
-            />
-        ),
-        helpLink: 'https://scratch.mit.edu/ev3'
-    },
-    {
-        name: 'LEGO BOOST',
-        extensionId: 'boost',
-        collaborator: 'LEGO',
-        iconURL: boostIconURL,
-        insetIconURL: boostInsetIconURL,
-        description: (
-            <FormattedMessage
-                defaultMessage="Bring robotic creations to life."
-                description="Description for the 'LEGO BOOST' extension"
-                id="gui.extension.boost.description"
-            />
-        ),
-        featured: true,
-        disabled: false,
-        bluetoothRequired: true,
-        internetConnectionRequired: true,
-        launchPeripheralConnectionFlow: true,
-        useAutoScan: true,
-        connectionIconURL: boostConnectionIconURL,
-        connectionSmallIconURL: boostConnectionSmallIconURL,
-        connectionTipIconURL: boostConnectionTipIconURL,
-        connectingMessage: (
-            <FormattedMessage
-                defaultMessage="Connecting"
-                description="Message to help people connect to their BOOST."
-                id="gui.extension.boost.connectingMessage"
-            />
-        ),
-        helpLink: 'https://scratch.mit.edu/boost'
-    },
-    {
-        name: 'LEGO Education WeDo 2.0',
-        extensionId: 'wedo2',
-        collaborator: 'LEGO',
-        iconURL: wedo2IconURL,
-        insetIconURL: wedo2InsetIconURL,
-        description: (
-            <FormattedMessage
-                defaultMessage="Build with motors and sensors."
-                description="Description for the 'LEGO WeDo 2.0' extension"
-                id="gui.extension.wedo2.description"
-            />
-        ),
-        featured: true,
-        disabled: false,
-        bluetoothRequired: true,
-        internetConnectionRequired: true,
-        launchPeripheralConnectionFlow: true,
-        useAutoScan: true,
-        connectionIconURL: wedo2ConnectionIconURL,
-        connectionSmallIconURL: wedo2ConnectionSmallIconURL,
-        connectionTipIconURL: wedo2ConnectionTipIconURL,
-        connectingMessage: (
-            <FormattedMessage
-                defaultMessage="Connecting"
-                description="Message to help people connect to their WeDo."
-                id="gui.extension.wedo2.connectingMessage"
-            />
-        ),
-        helpLink: 'https://scratch.mit.edu/wedo'
-    },
-    {
-        name: 'Go Direct Force & Acceleration',
-        extensionId: 'gdxfor',
-        collaborator: 'Vernier',
-        iconURL: gdxforIconURL,
-        insetIconURL: gdxforInsetIconURL,
-        description: (
-            <FormattedMessage
-                defaultMessage="Sense push, pull, motion, and spin."
-                description="Description for the Vernier Go Direct Force and Acceleration sensor extension"
-                id="gui.extension.gdxfor.description"
-            />
-        ),
-        featured: true,
-        disabled: false,
-        bluetoothRequired: true,
-        internetConnectionRequired: true,
-        launchPeripheralConnectionFlow: true,
-        useAutoScan: false,
-        connectionIconURL: gdxforConnectionIconURL,
-        connectionSmallIconURL: gdxforConnectionSmallIconURL,
-        connectingMessage: (
-            <FormattedMessage
-                defaultMessage="Connecting"
-                description="Message to help people connect to their force and acceleration sensor."
-                id="gui.extension.gdxfor.connectingMessage"
-            />
-        ),
-        helpLink: 'https://scratch.mit.edu/vernier'
-    },
-];
+]
diff --git a/src/lib/libraries/extensions/index.jsx b/src/lib/libraries/extensions/index.jsx
index 0167d5608..5c1c6656b 100644
--- a/src/lib/libraries/extensions/index.jsx
+++ b/src/lib/libraries/extensions/index.jsx
@@ -1,6 +1,51 @@
 import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
+import musicIconURL from './music/music.png';
+import musicInsetIconURL from './music/music-small.svg';
+
+import penIconURL from './pen/pen.png';
+import penInsetIconURL from './pen/pen-small.svg';
+
+import videoSensingIconURL from './videoSensing/video-sensing.png';
+import videoSensingInsetIconURL from './videoSensing/video-sensing-small.svg';
+
+import text2speechIconURL from './text2speech/text2speech.png';
+import text2speechInsetIconURL from './text2speech/text2speech-small.svg';
+
+import translateIconURL from './translate/translate.png';
+import translateInsetIconURL from './translate/translate-small.png';
+
+import makeymakeyIconURL from './makeymakey/makeymakey.png';
+import makeymakeyInsetIconURL from './makeymakey/makeymakey-small.svg';
+
+import microbitIconURL from './microbit/microbit.png';
+import microbitInsetIconURL from './microbit/microbit-small.svg';
+import microbitConnectionIconURL from './microbit/microbit-illustration.svg';
+import microbitConnectionSmallIconURL from './microbit/microbit-small.svg';
+
+import ev3IconURL from './ev3/ev3.png';
+import ev3InsetIconURL from './ev3/ev3-small.svg';
+import ev3ConnectionIconURL from './ev3/ev3-hub-illustration.svg';
+import ev3ConnectionSmallIconURL from './ev3/ev3-small.svg';
+
+import wedo2IconURL from './wedo2/wedo.png'; // TODO: Rename file names to match variable/prop names?
+import wedo2InsetIconURL from './wedo2/wedo-small.svg';
+import wedo2ConnectionIconURL from './wedo2/wedo-illustration.svg';
+import wedo2ConnectionSmallIconURL from './wedo2/wedo-small.svg';
+import wedo2ConnectionTipIconURL from './wedo2/wedo-button-illustration.svg';
+
+import boostIconURL from './boost/boost.png';
+import boostInsetIconURL from './boost/boost-small.svg';
+import boostConnectionIconURL from './boost/boost-illustration.svg';
+import boostConnectionSmallIconURL from './boost/boost-small.svg';
+import boostConnectionTipIconURL from './boost/boost-button-illustration.svg';
+
+import gdxforIconURL from './gdxfor/gdxfor.png';
+import gdxforInsetIconURL from './gdxfor/gdxfor-small.svg';
+import gdxforConnectionIconURL from './gdxfor/gdxfor-illustration.svg';
+import gdxforConnectionSmallIconURL from './gdxfor/gdxfor-small.svg';
+
 import geoloniaIconURL from './geolonia/geolonia.png';
 import geoloniaInsetIconURL from './geolonia/geolonia-small.png';
 

From 7ac06c9a964c89cf05da070ab8fcd03382465038 Mon Sep 17 00:00:00 2001
From: Aquino Luane <aquino@macareux.co.jp>
Date: Fri, 13 Dec 2024 16:06:06 +0900
Subject: [PATCH 07/16] feat(extension): manually set language to modal
 extension title

---
 src/containers/extension-library.jsx | 35 +++++++++++++++++++++-------
 src/languages/en.json                |  3 +++
 src/languages/ja.json                |  3 +++
 3 files changed, 33 insertions(+), 8 deletions(-)
 create mode 100644 src/languages/en.json
 create mode 100644 src/languages/ja.json

diff --git a/src/containers/extension-library.jsx b/src/containers/extension-library.jsx
index b46d992c0..1f0d74660 100644
--- a/src/containers/extension-library.jsx
+++ b/src/containers/extension-library.jsx
@@ -3,31 +3,40 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import VM from 'scratch-vm';
 import {defineMessages, injectIntl, intlShape} from 'react-intl';
+import {connect} from 'react-redux';
 
 import extensionLibraryContent from '../lib/libraries/extensions/index.jsx';
 
 import LibraryComponent from '../components/library/library.jsx';
 import extensionIcon from '../components/action-menu/icon--sprite.svg';
+import en from '../languages/en.json';
+import ja from '../languages/ja.json';
 
 const messages = defineMessages({
-    extensionTitle: {
-        defaultMessage: 'Choose an Extension',
-        description: 'Heading for the extension library',
-        id: 'gui.extensionLibrary.chooseAnExtension'
-    },
     extensionUrl: {
         defaultMessage: 'Enter the URL of the extension',
         description: 'Prompt for unoffical extension url',
         id: 'gui.extensionLibrary.extensionUrl'
     }
 });
-
 class ExtensionLibrary extends React.PureComponent {
     constructor (props) {
         super(props);
         bindAll(this, [
             'handleItemSelect'
         ]);
+        this.state = {
+            modalTitle: ''
+        };
+    }
+    componentDidMount() {
+        if(this.props.currentLocale === 'ja') {
+            this.setState({modalTitle: ja.chooseExtensionModalTitle});
+        }
+        else {
+            this.setState({modalTitle: en.chooseExtensionModalTitle});
+        }
+
     }
     handleItemSelect (item) {
         const id = item.extensionId;
@@ -56,7 +65,7 @@ class ExtensionLibrary extends React.PureComponent {
                 data={extensionLibraryThumbnailData}
                 filterable={false}
                 id="extensionLibrary"
-                title={this.props.intl.formatMessage(messages.extensionTitle)}
+                title={this.state.modalTitle}
                 visible={this.props.visible}
                 onItemSelected={this.handleItemSelect}
                 onRequestClose={this.props.onRequestClose}
@@ -67,10 +76,20 @@ class ExtensionLibrary extends React.PureComponent {
 
 ExtensionLibrary.propTypes = {
     intl: intlShape.isRequired,
+    currentLocale: PropTypes.string.isRequired,
     onCategorySelected: PropTypes.func,
     onRequestClose: PropTypes.func,
     visible: PropTypes.bool,
     vm: PropTypes.instanceOf(VM).isRequired // eslint-disable-line react/no-unused-prop-types
 };
 
-export default injectIntl(ExtensionLibrary);
+
+const mapStateToProps = state => {
+    return {
+        currentLocale: state.locales.locale,
+    }
+}
+
+export default injectIntl(connect(
+    mapStateToProps,
+)(ExtensionLibrary));
diff --git a/src/languages/en.json b/src/languages/en.json
new file mode 100644
index 000000000..d03e57e8d
--- /dev/null
+++ b/src/languages/en.json
@@ -0,0 +1,3 @@
+{
+    "chooseExtensionModalTitle": "Optional Extensions for Your Project :)"
+  }
diff --git a/src/languages/ja.json b/src/languages/ja.json
new file mode 100644
index 000000000..fee212365
--- /dev/null
+++ b/src/languages/ja.json
@@ -0,0 +1,3 @@
+{
+    "chooseExtensionModalTitle": "プロジェクトのオプション拡張機能 :)"
+  }

From 57bf2ad806a1df9e671a53f36019c623d343aa94 Mon Sep 17 00:00:00 2001
From: Aquino Luane <aquino@macareux.co.jp>
Date: Tue, 17 Dec 2024 14:28:03 +0900
Subject: [PATCH 08/16] refactor(translation): create HOC to return translated
 messages

---
 src/containers/extension-library.jsx | 33 +++-------------
 src/languages/en.json                |  3 --
 src/languages/ja.json                |  3 --
 src/lib/translation-hoc.jsx          | 59 ++++++++++++++++++++++++++++
 4 files changed, 64 insertions(+), 34 deletions(-)
 delete mode 100644 src/languages/en.json
 delete mode 100644 src/languages/ja.json
 create mode 100644 src/lib/translation-hoc.jsx

diff --git a/src/containers/extension-library.jsx b/src/containers/extension-library.jsx
index 1f0d74660..2a85a24df 100644
--- a/src/containers/extension-library.jsx
+++ b/src/containers/extension-library.jsx
@@ -2,15 +2,13 @@ import bindAll from 'lodash.bindall';
 import PropTypes from 'prop-types';
 import React from 'react';
 import VM from 'scratch-vm';
+import {compose} from 'redux';
 import {defineMessages, injectIntl, intlShape} from 'react-intl';
-import {connect} from 'react-redux';
 
 import extensionLibraryContent from '../lib/libraries/extensions/index.jsx';
-
 import LibraryComponent from '../components/library/library.jsx';
 import extensionIcon from '../components/action-menu/icon--sprite.svg';
-import en from '../languages/en.json';
-import ja from '../languages/ja.json';
+import TranslationHOC from '../lib/translation-hoc.jsx';
 
 const messages = defineMessages({
     extensionUrl: {
@@ -25,18 +23,6 @@ class ExtensionLibrary extends React.PureComponent {
         bindAll(this, [
             'handleItemSelect'
         ]);
-        this.state = {
-            modalTitle: ''
-        };
-    }
-    componentDidMount() {
-        if(this.props.currentLocale === 'ja') {
-            this.setState({modalTitle: ja.chooseExtensionModalTitle});
-        }
-        else {
-            this.setState({modalTitle: en.chooseExtensionModalTitle});
-        }
-
     }
     handleItemSelect (item) {
         const id = item.extensionId;
@@ -65,7 +51,7 @@ class ExtensionLibrary extends React.PureComponent {
                 data={extensionLibraryThumbnailData}
                 filterable={false}
                 id="extensionLibrary"
-                title={this.state.modalTitle}
+                title={this.props.messagesTranslation.chooseExtensionModalTitle || ""}
                 visible={this.props.visible}
                 onItemSelected={this.handleItemSelect}
                 onRequestClose={this.props.onRequestClose}
@@ -76,20 +62,11 @@ class ExtensionLibrary extends React.PureComponent {
 
 ExtensionLibrary.propTypes = {
     intl: intlShape.isRequired,
-    currentLocale: PropTypes.string.isRequired,
+    messagesTranslation: PropTypes.object,
     onCategorySelected: PropTypes.func,
     onRequestClose: PropTypes.func,
     visible: PropTypes.bool,
     vm: PropTypes.instanceOf(VM).isRequired // eslint-disable-line react/no-unused-prop-types
 };
 
-
-const mapStateToProps = state => {
-    return {
-        currentLocale: state.locales.locale,
-    }
-}
-
-export default injectIntl(connect(
-    mapStateToProps,
-)(ExtensionLibrary));
+export default compose(injectIntl, TranslationHOC)(ExtensionLibrary);
diff --git a/src/languages/en.json b/src/languages/en.json
deleted file mode 100644
index d03e57e8d..000000000
--- a/src/languages/en.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-    "chooseExtensionModalTitle": "Optional Extensions for Your Project :)"
-  }
diff --git a/src/languages/ja.json b/src/languages/ja.json
deleted file mode 100644
index fee212365..000000000
--- a/src/languages/ja.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-    "chooseExtensionModalTitle": "プロジェクトのオプション拡張機能 :)"
-  }
diff --git a/src/lib/translation-hoc.jsx b/src/lib/translation-hoc.jsx
new file mode 100644
index 000000000..ecd030bef
--- /dev/null
+++ b/src/lib/translation-hoc.jsx
@@ -0,0 +1,59 @@
+import React from "react";
+import {connect} from 'react-redux';
+import PropTypes from 'prop-types';
+
+const messagesEnglish = {
+    "chooseExtensionModalTitle": "Optional Extensions for Your Project :)"
+  }
+
+const messagesJapanese = {
+    "chooseExtensionModalTitle": "プロジェクトのオプション拡張機能 :)"
+  }
+
+const TranslationHOC = function(WrappedComponent) {
+    class TranslationContainer extends React.PureComponent {
+        constructor (props) {
+            super(props);
+        }
+        state = {
+            messages: {},
+        };
+        componentDidMount() {
+            this.updateTranslation();
+        }
+        componentDidUpdate(){
+            this.updateTranslation();
+        }
+        updateTranslation = () => {
+            if (this.props.currentLocale === 'ja') {
+                this.setState({
+                    messages: messagesJapanese,
+                  });
+            } else {
+                this.setState({
+                    messages: messagesEnglish,
+                  });
+            }
+          }
+        render () {
+            return (<WrappedComponent
+                messagesTranslation={this.state.messages}
+                {...this.props}
+            />);
+        }
+    }
+    TranslationContainer.propTypes = {
+        currentLocale: PropTypes.string.isRequired,
+    };
+    const mapStateToProps = state => {
+        return {
+            currentLocale: state.locales.locale,
+        }
+    }
+    return connect(
+        mapStateToProps,
+    )(TranslationContainer);
+
+};
+
+export default TranslationHOC;

From 7e0a5e71a53d36f3d8746072b465711ed7b2231e Mon Sep 17 00:00:00 2001
From: Aquino Luane <aquino@macareux.co.jp>
Date: Mon, 23 Dec 2024 10:42:55 +0900
Subject: [PATCH 09/16] feat: add car image

---
 .../bcf454acf82e4504149f7ffe07081dbc.svg               | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/src/lib/default-project/bcf454acf82e4504149f7ffe07081dbc.svg b/src/lib/default-project/bcf454acf82e4504149f7ffe07081dbc.svg
index e9c5b7578..1981b79fb 100644
--- a/src/lib/default-project/bcf454acf82e4504149f7ffe07081dbc.svg
+++ b/src/lib/default-project/bcf454acf82e4504149f7ffe07081dbc.svg
@@ -1,9 +1 @@
-<svg width="96" height="98" viewBox="0 0 96 98" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M64.8066 21.2576C64.4286 16.3561 61.3433 13.0414 59.2743 11.3471C58.646 10.8329 57.726 11.3225 57.7648 12.1502C57.8637 14.2409 57.9901 17.6217 57.3492 21.1592C57.2404 21.7628 57.6384 22.2589 58.2329 22.2589H63.9004C64.4249 22.2589 64.8467 21.7978 64.8054 21.2563L64.8066 21.2576Z" fill="black"/>
-<path d="M51.6116 95.5558C53.6681 93.6245 53.6781 92.4238 52.0297 90.8681C51.2562 90.1375 50.1597 89.8953 49.1496 90.1803L40.1364 95.4043C39.5982 95.5558 39.7046 96.3771 40.2629 96.3771H49.5314C50.2974 96.3771 51.0446 96.0882 51.6116 95.5558Z" fill="#EA5514"/>
-<path d="M58.3819 82.784C64.8992 79.0613 69.8383 70.9124 70.5016 62.8439C70.5354 62.4306 71.1087 62.3944 71.1963 62.7985C73.4017 72.9435 71.6344 81.0055 58.6159 83.4589C58.2266 83.5327 58.0351 82.9809 58.3806 82.784H58.3819Z" fill="black"/>
-<path d="M35.5904 90.2619C34.7155 90.5974 31.7078 91.7515 30.0494 92.3707C29.8153 92.4575 29.7665 92.7735 29.958 92.938L33.1722 95.7281C33.763 96.2333 34.5165 96.5027 35.2825 96.4652C38.0562 96.3305 38.8022 95.4108 38.488 93.1258C38.3516 92.1362 37.0248 90.837 36.0698 90.2904C35.9209 90.2049 35.7494 90.201 35.5904 90.2619Z" fill="#EA5514"/>
-<path d="M63.4047 42.6602H62.3559C61.108 42.6602 59.9777 42.6304 58.9388 42.5708C58.3568 42.6356 57.7673 42.6705 57.1702 42.6705C47.4011 42.6705 39.4818 33.751 39.4818 22.7485C39.4818 11.7461 47.3998 2.82781 57.1702 2.82781C59.9189 2.82781 62.5211 3.53375 64.8417 4.7941C64.8417 4.7941 64.8429 4.7941 64.8442 4.7941C65.2247 4.98063 65.5488 4.45991 65.2247 4.18141C62.7414 2.04414 59.6711 0.731978 56.1952 0.222918C42.5772 -1.77058 30.6902 9.80051 31.117 24.027C31.2597 28.7782 31.9644 32.4155 32.7116 35.2756C33.8068 39.4737 33.0696 43.9594 30.754 47.5889L0.153522 95.5468C-0.27079 96.2113 0.218608 97.0895 0.987126 97.0506C13.0944 96.4406 24.0527 94.153 33.4902 89.6453C37.8472 87.5637 40.6233 83.0327 40.6233 78.0677V73.1378C40.6233 58.9035 52.3251 47.3402 66.0432 47.1316C66.2573 47.1277 66.4212 46.9347 66.3887 46.7171C66.1233 44.9646 64.3084 42.7003 63.4035 42.6641L63.4047 42.6602Z" fill="black"/>
-<path d="M71.8484 6.24743C71.5468 6.15935 71.3791 6.59458 71.6569 6.74613C80.401 11.5025 85.8833 18.8263 85.8833 22.7498C85.8833 26.6733 80.391 34.0113 71.6319 38.7664C71.354 38.9167 71.5205 39.3532 71.8234 39.2651C87.3777 34.7639 95.9966 26.2744 95.9966 22.7498C95.9966 19.2252 87.364 10.7538 71.8484 6.24743Z" fill="#EA5514"/>
-<path d="M75.6134 12.079C74.4256 11.1503 72.8047 10.013 70.797 8.90677C70.4578 8.72024 70.1111 9.14511 70.3514 9.45598C73.1714 13.1023 74.8599 17.7253 74.8599 22.7486C74.8599 27.7718 73.1714 32.3948 70.3514 36.0411C70.1111 36.3507 70.4578 36.7769 70.797 36.5903C72.8059 35.4841 74.4268 34.3468 75.6134 33.4181C81.1345 29.0995 83.6178 24.5788 83.6178 22.7473C83.6178 20.9157 81.1345 16.395 75.6134 12.0764V12.079Z" fill="#F8B62D"/>
-</svg>
+<svg fill="none" height="115" viewBox="0 0 174 115" width="174" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m0 0h174v115h-174z"/></clipPath><g clip-path="url(#a)"><path d="m51.6721 115c-7.6839 0-14.5863-4.045-18.4438-10.563-4.9117.269-9.4575.576-13.8111.939l-2.431.2-1.3272-1.471c-.2356 0-.4589 0-.6884 0-7.01403 0-11.06992-2.21-12.04978-6.5622-.3721-1.6468-.72559-3.4-1.04808-5.2033-.53954-1.5404-1.215525-4.0638-1.041879-6.7312-1.60623-12.542-.8930388-21.4647 2.127169-26.5428 3.7396-6.2867 12.84367-10.5007 21.64997-14.577 4.9179-2.2792 11.039-5.1094 12.608-7.0442.5396-.6638 1.0109-1.3588 1.4388-2.1102.738-4.1389 2.0527-9.8369 4.2543-15.0841 1.1597-4.3455 3.2435-9.9121 8.8188-15.13422 3.2435-3.03687 8.5645-4.420674 17.2592-4.470766l52.6829-.331864c1.836-.212893 3.597-.3256012 5.247-.3256012 20.068 0 23.504 15.6852512 26.264 28.2897512.477 2.1853.974 4.427 1.532 6.5935.849.4132 2.22.9517 3.218 1.3399 3.697 1.4465 7.517 2.9367 9.737 5.7607 2.772 3.519 4.49 9.1419 5.24 17.1692 1.191 3.3437 1.532 8.5345.385 12.1036-.186 8.8351-1.396 20.131-3.368 24.4765-3.032 6.7003-10.635 6.7753-16.744 6.8373-2.189.025-4.261.044-5.929.32-.285.05-.577.069-.862.069-.118 0-.267 0-.44-.019-3.715 6.919-10.946 11.44-18.928 11.44-7.981 0-15.268-4.502-18.977-11.522-1.197.013-7.095.082-7.095.082l-14.1951.15c-5.2218.056-10.5863.113-16.0003.194-3.6714 7.132-10.9521 11.722-19.0825 11.722z" fill="#fff"/><path d="m19.0142 100.386c22.0221-1.8413 46.3078-2.0793 68.3981-2.3172 5.6807-.0626 11.3677-.119 17.0487-.1816 23.721-.2567 56.745-1.1709 57.526-2.2917.608-.8641 4.149-7.9209 4.261-8.9729.204-1.9223-10.183-1.2523-16.782-1.772-.564-.0438-1.16-.1002-1.631-.4195-.508-.3444-1.042-.8891-1.036-1.509.056-4.5459-2.108-10.9703-6.511-14.8587-3.808-3.3625-14.115-3.9699-19.703-3.062-2.654.4321-8.763 3.1997-11.095 5.4163-4.825 4.5772-4.155 10.2377-5.147 16.8499-9.5445.4195-19.0889.839-28.6332 1.2586-1.0357.0438-2.1458.0688-3.014-.4947-.8559-.5573-1.6373-1.4902-1.6869-2.5171-.2481-5.4977-4.6078-13.8569-10.5986-16.6245-4.9862-2.3043-11.1072-1.2085-16.4468.0563-1.4574.3444-3.8699 1.6781-5.1226 2.5109-1.6186 1.077-5.1846 4.6774-6.0652 6.4181-2.3257 4.571-3.6218 6.5371-3.7706 11.6716-3.8823.382-9.5072.8578-13.3894.4759-4.3226 1.8158 3.3985 10.3693 3.3985 10.3693z" fill="#383838"/><path d="m56.3917 10.2189c-10.4808 9.7243-9.1661 18.7221-13.9724 31.79-7.2559 2.9054-27.8082 12.0535-32.83778 20.419-3.93185 6.5433-2.70392 23.1177 2.29458 29.8552 2.8094 3.7882 10.8405 3.9949 19.6159 3.1934 1.724-.1566-3.0512-19.5299 19.3058-22.3789 10.2699-1.3087 20.8499 7.0568 20.6329 21.377-.0186 1.1772 15.4731 1.9348 35.5723 1.4402.571-.0125.813-21.8466 18.202-23.4308 22.742-2.0726 20.435 22.0407 22.959 21.809 5.798-.5322 14.698 1.3838 16.292-4.0512 1.345-2.0914 2.48-6.6498 2.325-9.1419-.515-8.2089-.409-16.4116-.924-24.6205-.167-2.705-1.612-6.1426-2.958-8.4844-3.287-5.698-10.01-5.2284-15.765-8.1651-2.034-7.9522-2.207-14.0259-4.235-21.9781-1.104-4.3205-3.027-5.8233-6.487-8.58462-3.603-2.87406-11.69-2.35435-16.286-2.32305-16.819.10645-33.6439.20664-50.4628.31308-5.6063.03757-10.7537.63868-13.2591 2.95549z" fill="#fff"/><path d="m55.1017 8.79752c-11.0017 10.30658-6.152 22.07828-14.0467 31.82758-5.197 6.4181-28.5649 12.1537-33.8425 21.0263-4.1303 6.9379-1.73646 24.6143.54575 34.7893 1.09769 4.8773 16.34135 1.7345 25.54465.8766-6.8156-26.1295 36.7882-32.604 36.9557-1.0644-.0186 1.246 18.0964 2.0475 39.1944 1.5278.602-.0125-1.699-24.1321 16.621-24.2198 21.854-.1001 17.749 24.8084 20.372 24.3763 6.716-1.102 16.484 1.1647 18.958-4.2954 2.704-5.9735 5.65-39.2851-1.637-48.546-2.642-3.3624-12.211-4.9779-13.451-7.4011-4.614-16.4241-3.703-35.40296-28.354-32.36609-17.656.1127-35.3062.21915-52.9624.33186-5.8853.03757-11.287.67625-13.9103 3.13705z" fill="#fac13d"/><path d="m94.8296 96.998c-10.8902 0-22.6423-.3694-23.9943-1.7219-.2232-.2254-.3411-.5135-.3411-.814.0993-6.581-2.183-12.3228-6.4311-16.1674-3.659-3.3061-8.4529-4.859-13.1599-4.2641-16.7321 2.1289-17.5507 13.5625-17.9414 19.0539-.1365 1.9411-.2295 3.2247-1.3892 3.3312-11.5289 1.0582-17.8298-.0439-20.4407-3.5629-5.18456-6.9879-6.48071-24.0319-2.3442-30.9071 5.5443-9.2233 28.7261-18.9537 32.8998-20.6506 1.3706-3.7883 2.214-7.1946 3.0326-10.4944 1.9101-7.6892 3.5598-14.3328 11.0452-21.27057 2.307-2.14146 6.7164-3.1621 13.8793-3.20593l50.4634-.31308c.527 0 1.103-.01252 1.717-.02504 4.937-.08766 11.709-.20037 15.151 2.54846l.093.07513c3.461 2.76133 5.551 4.42693 6.723 9.01663 1.029 4.02 1.593 7.6078 2.139 11.0768.521 3.3061 1.055 6.7186 1.997 10.4818 1.774.8516 3.659 1.4026 5.489 1.9348 3.9 1.1396 7.925 2.3168 10.288 6.4056 1.371 2.3794 2.903 5.961 3.082 8.8977.261 4.1201.36 8.3029.466 12.3478.099 4.0262.204 8.1902.458 12.2727.168 2.7113-.992 7.3198-2.4 9.599-1.463 4.6336-7.28 4.5584-12.403 4.5021-1.674-.0188-3.256-.0376-4.657.0876-1.439.1315-1.817-1.5466-2.444-4.3267-1.494-6.6248-4.267-18.9601-20.515-17.4823-13.978 1.2711-16.298 16.2926-17.061 21.233-.229 1.4965-.335 2.1853-1.203 2.204-3.398.0814-7.7271.1441-12.1923.1441zm-22.4687-2.9993c2.3319.7201 14.915 1.4339 33.9291.9956.031-.1941.068-.4133.099-.6324 2.19-14.2075 8.497-21.8842 18.729-22.8109 17.874-1.628 20.993 12.2601 22.494 18.935.242 1.0644.533 2.3606.763 2.849 1.407-.1065 2.933-.0877 4.546-.0689 4.738.0564 9.643.1127 10.642-3.2873.024-.0877.062-.1691.111-.2442 1.222-1.8973 2.326-6.2178 2.177-8.5659-.261-4.1201-.36-8.3028-.465-12.3478-.099-4.0262-.205-8.1901-.459-12.2727-.161-2.6048-1.631-5.9735-2.834-8.0711-1.985-3.4376-5.327-4.4144-9.197-5.5478-2.041-.5948-4.155-1.2147-6.19-2.2479-.241-.1189-.415-.3443-.483-.6011-1.03-4.0199-1.594-7.6078-2.14-11.0767-.539-3.4251-1.098-6.9691-2.102-10.9014-1.017-3.9761-2.704-5.3223-6.072-8.0085l-.093-.0752c-2.927-2.33554-9.569-2.22283-13.966-2.14143-.62.01252-1.203.01879-1.736.02505l-50.4632.31308c-6.58.04383-10.7103.92671-12.6328 2.7113-7.0699 6.5621-8.5831 12.6421-10.4932 20.3438-.862 3.4626-1.7489 7.038-3.2373 11.083-.093.2504-.2852.4445-.5271.5447-2.121.8516-9.6188 3.9448-17.1476 8.115-7.9133 4.3831-13.1785 8.5032-15.2313 11.9221-3.75818 6.2553-2.49924 22.4101 2.245 28.8032 2.09 2.8177 8.0932 3.7569 18.3383 2.8615.0621-.3819.1117-1.0394.1551-1.6343.3969-5.5227 1.3209-18.4591 19.5662-20.7821 5.2342-.6637 10.5677 1.0582 14.6297 4.7275 4.5459 4.1138 7.0451 10.1688 7.0513 17.1003z" fill="#000"/><path d="m85.2231 55.177c1.3147 1.2085 7.3613.5197 8.0311-.1754.6698-.695.4962-2.0725-.3535-2.5735-.4403-.2567-.9674-.2942-1.476-.3256-1.4574-.0876-2.9147-.1815-4.3783-.2692-.6636-.0438-1.5318.0877-2.0838.4571-.5519.3694-.2046 2.4608.2667 2.8928z" fill="#fff"/><path d="m88.5534 56.7737c-1.6807 0-3.2621-.2567-3.9629-.8954-.6512-.5948-.9054-2.0976-.8434-2.9554.0496-.67.2853-1.1459.6884-1.4152.7814-.5259 1.8853-.6637 2.6605-.6136l4.3784.2693c.5271.0313 1.2465.0751 1.8853.4508.6573.3882 1.0977 1.0707 1.2093 1.891.1116.814-.124 1.5967-.6512 2.1477-.6078.6387-3.076 1.1146-5.3644 1.1146zm-2.6791-2.2667c.6635.4884 5.4264.5886 6.7412-.1941.1054-.1315.1488-.3381.1178-.551-.031-.2317-.1489-.432-.3039-.526-.2605-.1502-.6884-.1815-1.0667-.2003l-4.3784-.2693c-.4899-.025-1.0356.0626-1.3705.2254-.0558.3757.0868 1.2273.2605 1.5153z" fill="#000"/><path d="m120.107 55.6467c1.315 1.2085 7.362.5197 8.032-.1753.669-.6951.496-2.0726-.354-2.5735-.44-.2568-.967-.2943-1.476-.3256-1.457-.0877-2.915-.1816-4.378-.2693-.664-.0438-1.532.0877-2.084.4571-.552.3695-.205 2.4608.267 2.8929z" fill="#fff"/><path d="m123.438 57.2435c-1.681 0-3.262-.2568-3.963-.8955-.651-.5948-.906-2.0976-.844-2.9554.05-.67.286-1.1459.689-1.4151.781-.526 1.885-.6638 2.66-.6137l4.379.2693c.527.0313 1.246.0751 1.885.4508.657.3882 1.098 1.0707 1.209 1.891.112.814-.124 1.5967-.651 2.1477-.608.6387-3.076 1.1146-5.364 1.1146zm-2.679-2.2667c.657.4884 5.426.5885 6.741-.1941.105-.1315.149-.3382.118-.5511-.031-.2316-.149-.432-.304-.5259-.261-.1503-.689-.1816-1.067-.2004l-4.378-.2693c-.49-.0313-1.036.0627-1.371.2255-.056.3757.087 1.2272.261 1.5153z" fill="#000"/><path d="m51.6722 109.991c9.1621 0 16.5895-7.569 16.5895-16.9065 0-9.3371-7.4274-16.9063-16.5895-16.9063s-16.5894 7.5692-16.5894 16.9063c0 9.3375 7.4273 16.9065 16.5894 16.9065z" fill="#000"/><path d="m51.9822 103.103c5.2232 0 9.4575-4.3453 9.4575-9.7054 0-5.3602-4.2343-9.7055-9.4575-9.7055-5.2233 0-9.4575 4.3453-9.4575 9.7055 0 5.3601 4.2342 9.7054 9.4575 9.7054z" fill="#fff"/><path d="m51.8272 100.598c3.9389 0 7.1319-3.2235 7.1319-7.2004s-3.193-7.2008-7.1319-7.2008c-3.9388 0-7.1319 3.2239-7.1319 7.2008s3.1931 7.2004 7.1319 7.2004z" fill="#fff"/><path d="m51.8271 101.538c-4.4466 0-8.0622-3.6508-8.0622-8.1404 0-4.4895 3.6156-8.14 8.0622-8.14 4.4465 0 8.0621 3.6505 8.0621 8.14 0 4.4896-3.6156 8.1404-8.0621 8.1404zm0-14.402c-3.4172 0-6.2017 2.8115-6.2017 6.2616s2.7845 6.2616 6.2017 6.2616c3.4171 0 6.2016-2.8115 6.2016-6.2616s-2.7845-6.2616-6.2016-6.2616z" fill="#000"/><path d="m127.022 109.365c9.162 0 16.59-7.569 16.59-16.9065 0-9.3371-7.428-16.9063-16.59-16.9063s-16.589 7.5692-16.589 16.9063c0 9.3375 7.427 16.9065 16.589 16.9065z" fill="#000"/><path d="m127.332 102.477c5.224 0 9.458-4.3452 9.458-9.7054s-4.234-9.7054-9.458-9.7054c-5.223 0-9.457 4.3452-9.457 9.7054s4.234 9.7054 9.457 9.7054z" fill="#fff"/><path d="m127.177 100.911c-4.446 0-8.062-3.6501-8.062-8.1396 0-4.4896 3.616-8.1401 8.062-8.1401 4.447 0 8.063 3.6505 8.063 8.1401 0 4.4895-3.616 8.1396-8.063 8.1396zm0-14.4012c-3.417 0-6.201 2.8115-6.201 6.2616s2.784 6.2616 6.201 6.2616c3.418 0 6.202-2.8115 6.202-6.2616s-2.784-6.2616-6.202-6.2616z" fill="#000"/><path d="m57.6816 16.2489-3.2807 27.0437-11.6033-1.9724s1.9225-19.7177 10.0839-27.6761c1.8171-1.7721 4.8001 2.6048 4.8001 2.6048z" fill="#fff"/><path d="m54.3948 44.2382c-.0496 0-.1055 0-.1551-.0125l-11.6033-1.9724c-.4837-.0814-.8186-.526-.769-1.0207.0806-.8202 2.0528-20.156 10.363-28.2647.5271-.5134 1.1783-.7451 1.8977-.6762 2.0279.2066 3.9505 2.8865 4.3164 3.4188.1302.1878.186.4195.155.6449l-3.2807 27.0437c-.031.2568-.1612.4822-.3659.6387-.1612.119-.3597.1879-.5581.1879zm-10.5739-3.6881 9.7677 1.6593 3.1194-25.7037c-.7442-1.0019-1.9721-2.2542-2.766-2.3356-.1426-.0125-.2666.0063-.4155.1566-6.8652 6.6936-9.2218 22.3663-9.7056 26.2234z" fill="#000"/><path d="m70.8601 17.0754c-6.2264 2.5172-4.9055 25.7163-4.9055 25.7163l26.8718.5823.7256-27.2253s-18.729-.6762-22.6919.9267z" fill="#fff"/><path d="m92.8264 44.3132h-.0186l-26.8718-.5823c-.4837-.0125-.8806-.3945-.9054-.8829-.1365-2.442-1.1659-23.9567 5.4884-26.6429 4.0993-1.6531 22.295-1.0207 23.0702-.9956.5086.0188.9117.4508.8993.9642l-.7256 27.2254c-.0124.5071-.4279.9141-.9303.9141zm-25.9911-2.442 25.0795.5448.676-25.3594c-5.7366-.1753-18.4562-.2943-21.3896.8892-3.9504 1.5967-4.769 15.1592-4.3659 23.9254z" fill="#000"/><path d="m102.954 15.9233-.757 27.5509 26.357-.0125s.236-24.1258-6.623-26.5992c-3.324-1.1959-18.971-.9392-18.971-.9392z" fill="#fff"/><path d="m102.191 44.4134c-.254 0-.49-.1002-.67-.2818s-.273-.4258-.26-.6825l.756-27.5509c.013-.5009.416-.9017.912-.9142 1.619-.025 15.913-.2254 19.299.9956 7.275 2.6173 7.269 24.9524 7.244 27.4883 0 .5134-.422.933-.93.933l-26.357.0125zm1.668-27.5634-.707 25.6849 24.466-.0125c-.019-1.9286-.131-6.5684-.732-11.3334-.986-7.7957-2.859-12.5733-5.272-13.4436-2.437-.8766-12.905-.9455-17.755-.9017z" fill="#000"/><path d="m63.8025 32.8044c-.3783 1.5967-.0558 3.2498.3101 4.8527.3039 1.3212.6822 2.7113 1.7737 3.6568.5953.5134 1.4387.8641 2.2574.7326 1.4822-.2442 2.0899-1.8033 2.2636-3.1245.1612-1.2461-.1117-4.0701-.2233-5.3224-.2046-2.2416-5.997-2.3919-6.3753-.7952z" fill="#fff"/><path d="m67.7841 43.0109c-.8683 0-1.7737-.3507-2.5117-.9831-1.2899-1.1145-1.7303-2.6611-2.0714-4.1577-.3907-1.6968-.7318-3.5064-.31-5.2847.3597-1.4965 2.4806-1.8848 4.1861-1.7658 2.3442.1691 3.8822 1.2022 4.0187 2.6862l.0124.1503c.1302 1.4276.3783 4.0763.2046 5.3787-.2853 2.1915-1.4264 3.663-3.0388 3.926-.1674.025-.3349.0376-.5023.0376zm-3.0885-9.9434c-.3162 1.3713-.0248 2.8553.3225 4.3769.2853 1.2397.6078 2.4107 1.4698 3.1558.3597.3131.9427.6074 1.5008.5197 1.0977-.1816 1.4078-1.6844 1.4946-2.3168.1427-1.0958-.1054-3.8008-.2108-4.9592l-.0124-.1502c-.0248-.2818-.4652-.5886-1.1225-.7827-1.4388-.4321-3.1257-.1566-3.4358.1628z" fill="#000"/><path d="m61.3714 44.6576c-.5705-2.6424 1.7737-5.1095 4.1241-7.157.2915-.2567.7132-.5385 1.1411-.4195.6636.1815.3287.9141-.0682 1.3462-1.3086 1.4214-2.1086 3.0995-2.2822 4.8151-.0744.7076-.062 1.4653-.614 2.0476-.5519.5823-1.9411.7639-2.4.144-.2605-.3507-.1117-.7827.0372-1.1709" fill="#fff"/><path d="m62.2584 46.7552c-.0621 0-.1241 0-.1861 0-.6636-.0376-1.2155-.3131-1.5504-.7576-.5023-.6763-.3225-1.4214-.1612-1.8723-.1737-2.8177 2.1643-5.2785 4.5272-7.3323.6697-.5885 1.3457-.7952 1.9907-.6198.5085.1377.8806.4884 1.0109.958.248.8766-.4279 1.7031-.645 1.9348-1.1783 1.2774-1.8853 2.7551-2.0404 4.2704l-.0248.263c-.062.7075-.1364 1.5904-.8434 2.3355-.4837.5072-1.2837.8203-2.0899.8203zm2.1891-6.9942c-1.4449 1.4903-2.5116 3.1058-2.1643 4.6962.031.1503.0248.3006-.0062.4383.248-.0188.5891-.1064.7256-.2504.2418-.2505.2852-.6199.3348-1.2023l.0249-.2943c.1178-1.1709.4899-2.3105 1.0852-3.3812z" fill="#000"/><path d="m140.957 13.6128c-1.42-1.4902-7.318 2.0037-7.318 2.0037l4.943 27.0563 9.321-3.231s-1.346-19.9556-6.946-25.829z" fill="#fff"/><path d="m138.588 43.6118c-.161 0-.322-.0438-.471-.1315-.236-.1377-.397-.3694-.446-.6387l-4.943-27.0562c-.068-.3882.105-.7827.446-.9831 1.96-1.1646 6.717-3.6755 8.459-1.8471 5.774 6.0486 7.151 25.591 7.207 26.4175.031.4258-.23.814-.627.9518l-9.321 3.2309c-.099.0314-.198.0501-.304.0501zm-3.907-27.5071 4.627 25.3281 7.615-2.6361c-.303-3.5817-1.91-19.58-6.635-24.5266-.385-.407-2.903.3256-5.613 1.8409z" fill="#000"/><path d="m162.707 59.6853c-1.464 2.0914-.819 9.2984 1.023 10.8951.905.789 3.789 1.0708 4.465 0 1.408-2.2291.974-9.336-.763-11.2019-.886-.9455-3.956-.789-4.719.3068z" fill="#fff"/><path d="m166.273 72.2211c-1.123 0-2.425-.3006-3.145-.9267-2.195-1.8973-2.939-9.6178-1.178-12.1475.732-1.0456 2.301-1.2648 2.946-1.3086.521-.0376 2.294-.0814 3.212.9016 1.985 2.1227 2.524 9.743.875 12.3479-.36.5698-1.03.9455-1.929 1.0769-.242.0376-.502.0564-.781.0564zm-.912-12.5231c-.105 0-.217 0-.335.0125-.868.0626-1.432.3381-1.557.5197-1.19 1.7094-.595 8.3717.869 9.6366.31.2692 1.439.5823 2.425.4445.452-.0626.626-.2003.651-.2379 1.184-1.8722.75-8.5408-.658-10.0498-.136-.1441-.651-.3256-1.395-.3256z" fill="#000"/><path d="m9.93497 78.8646c-2.37523-2.6737-3.69619-6.2741-3.61557-9.862.02481-1.2335.23567-2.5234.96746-3.5064.7318-.9831 2.12097-1.5654 3.23104-1.052 1.0791.5009 1.5504 1.7783 1.8295 2.943.6698 2.8239.8434 5.7606.5086 8.6409-.0931.7952-.2543 1.6531-.8497 2.1791-.5953.5259-2.06513.6512-2.06513.6512z" fill="#fff"/><path d="m9.93494 79.8039c-.26047 0-.51474-.1127-.69459-.3131-2.53027-2.849-3.93805-6.6811-3.85743-10.5069.03721-1.7344.41551-3.0619 1.15971-4.0512 1.06049-1.4214 2.93339-1.9975 4.35977-1.34 1.507.695 2.059 2.3731 2.3442 3.5816.7008 2.9429.8745 5.961.5272 8.9728-.1117.9643-.3349 2.0413-1.1659 2.7739-.7877.6951-2.3071.8579-2.6047.8829-.02485 0-.04966 0-.08066 0zm-.30388-14.6082c-.59536 0-1.24033.3882-1.59383.8641-.49613.6699-.7566 1.6405-.78141 2.9617-.06822 3.1934 1.04188 6.3868 3.06358 8.8413.4528-.0814.9179-.2191 1.0791-.3632.3535-.313.4714-.9768.5396-1.5841.3225-2.7864.1612-5.5854-.49-8.3154-.31-1.3087-.7255-2.0413-1.3085-2.3105-.16125-.0752-.32869-.1065-.50234-.1065z" fill="#000"/><path d="m6.24486 83.9615c.78141-1.6343 7.37994.7013 8.81254.9079 2.1582.3131 5.8668-.3632 7.411 1.1959 1.9225 1.9349 1.5938 4.6649 1.6186 7.4075.0186 2.5798-1.476 3.1621-3.0078 3.6004-5.3148 1.5278-10.4436-.5823-12.59554-2.8866-1.84809-1.9724-3.59076-7.3949-2.2388-10.2251z" fill="#fff"/><path d="m17.4203 98.5197c-4.031 0-7.70863-1.6468-9.61254-3.6881-2.02794-2.1665-3.97526-7.9835-2.40004-11.2833.86203-1.8034 4.06209-1.1083 8.16138-.0125.6884.1815 1.3396.3569 1.6248.4007.6016.0877 1.3706.0877 2.1892.0939 2.0652.0063 4.4032.0188 5.7428 1.365 1.9411 1.9537 1.9163 4.5146 1.8915 6.9879 0 .357-.0062.7201 0 1.0833.0248 3.4439-2.3877 4.1389-3.6838 4.5146-1.3086.3757-2.6295.5448-3.9133.5448zm-10.36294-14.0948c-1.1287 2.4733.49614 7.4137 2.09616 9.1231 1.70548 1.8221 6.38768 4.1452 11.66528 2.6236 1.4574-.4195 2.3443-.8077 2.3319-2.6925 0-.3694 0-.7451 0-1.1145.0248-2.273.0434-4.2391-1.3458-5.6355-.8-.8077-2.7349-.814-4.4404-.8202-.8868 0-1.724 0-2.4496-.1127-.3907-.0564-1.0295-.2254-1.8357-.4446-1.3024-.3506-5.24663-1.4026-6.02804-.933z" fill="#000"/></g></svg>

From 8b91dc7df9f737d32245e4c69f6b965259f7886b Mon Sep 17 00:00:00 2001
From: Aquino Luane <aquino@macareux.co.jp>
Date: Mon, 23 Dec 2024 15:38:34 +0900
Subject: [PATCH 10/16] feat(menu-bar): replace Scratch logo

---
 src/components/menu-bar/logo.svg         | 1 +
 src/components/menu-bar/menu-bar.jsx     | 6 +++---
 src/components/menu-bar/scratch-logo.svg | 1 -
 3 files changed, 4 insertions(+), 4 deletions(-)
 create mode 100644 src/components/menu-bar/logo.svg
 delete mode 100644 src/components/menu-bar/scratch-logo.svg

diff --git a/src/components/menu-bar/logo.svg b/src/components/menu-bar/logo.svg
new file mode 100644
index 000000000..d750ad5c0
--- /dev/null
+++ b/src/components/menu-bar/logo.svg
@@ -0,0 +1 @@
+<svg fill="none" height="40" viewBox="0 0 70 40" width="70" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="a"><path d="m0 0h70v40h-70z"/></clipPath><g clip-path="url(#a)"><path d="m69.1713 23.814c2.3026-2.8837-1.3816-7.0697-4.5132-6.3255-.3684-1.0233-1.3815-1.8605-2.3947-2.0465.6447-3.0698-2.671-4.6512-5.3421-4.3721-1.3816-3.4419-8.0132-2.88376-7.9211 1.3023h-.2763c-.7368-1.9535-3.0394-2.3256-4.8816-1.8605-.6447 0-1.2894.3721-1.8421.8372l-5.0657-1.1163c-.0922 0-.1843 0-.3685 0v-2.69763c.3685-6.604647-1.3815-7.25581-7.4605-6.883717-3.0395.372097-9.0263-1.116279-11.0526 1.581397-.1842-.65116-.6448-1.2093-1.1974-1.67442-1.75-1.302326-4.1447-.372093-5.8026.74419-.3684 0-.7369 0-1.19739 0-2.39474-1.860469-7.55264 0-7.27632 3.44186-2.947368 1.11628-2.394737 5.30232-.55263 7.16282-2.763159 1.4883-1.750001 4.9302.27631 6.6046 1.47369 1.8605 3.86843 1.0233 5.71053.2791 2.0263 3.0698 7.1842 1.8605 10.3158 1.4884.1842.093.2763.279.4605.3721-.2763 0 .7369 10.1395.7369 10.5116.2763 3.7209 5.8947 4.186 7.6447 1.3953 0 0 1.9342.7442 2.0263.7442 1.1974.4651 2.6711.2791 3.6842-.4651.6448-.4651 1.1053-1.1163 1.3816-1.8605.4605.5582 1.0132 1.0233 1.6579 1.3954 1.0132.3721 2.1184.3721 3.1316 0l2.7631-1.3023c0 1.7674 1.2895 3.4418 3.0395 3.5348-1.0131 4.3721 6.079 7.3489 8.0132 2.6977 1.0131.6512 2.3947 1.3954 3.5921 1.3023 1.5658 1.4884 4.6973 1.5814 6.3552 0 0 0 .1842-.186.2763-.279 2.7632 0 6.1711-2.8837 4.4211-5.8605l-.5526-1.0233c.3684-.5581.4605-1.3023.4605-1.9534.0921-.1861.3684-.6512.3684-.6512.1842-.3721.3684-.9302.3684-1.5814s-.1842-1.3023-.4605-1.9535c.4605-.4651.829-1.0232 1.2895-1.5814z" fill="#fff"/><g fill="#000"><path d="m45.5928 31.2558h5.9868c0-.093-3.0395 4.2791-3.0395 4.2791l1.2895.8372 4.5132-6.6046h-8.75z"/><path d="m52.3161 29.2093.4606-1.3954-4.9737-1.3023-.3684 1.3953 4.9737 1.3024z"/><path d="m62.8156 26.9768c-.2763 0-.4605.093-.6447.3721v.2791c0 .279.0921.4651.3684.6511h.2763c.2763 0 .4606-.186.5527-.3721 0-.093 0-.186 0-.279 0-.2791-.0921-.4651-.3685-.5582 0 0-.1842 0-.2763 0z"/><path d="m64.658 26.7908s-.1842 0-.2763 0c-.2763 0-.4605.093-.5526.3721v.279c0 .1861.0921.4652.3684.5582h.2763c.2764 0 .4606-.093.5527-.2791 0 0 0-.186 0-.2791 0-.186-.0921-.4651-.2763-.5581z"/><path d="m64.198 28.5582h-3.4079v-1.7674h-1.4737v1.9535h-3.5v1.4883h3.5l-.0921 6.1396h1.4737v-6.2326h3.4079v-1.4884z"/><path d="m61.5264 31.3489 2.0263 3.721 1.2895-.7442-2.0264-3.721z"/><path d="m55.2637 34.6047 1.2894.6512 1.9343-4-1.2895-.6512z"/></g><path d="m58.8561 14.7908-1.3816-.2791-2.3026 11.3489 1.2894.279 2.3027-11.3488z" fill="#00cc8b"/><path d="m58.8557 20.9303 1.3816-.3721c.3684 3.2558 1.0132 4.9303 2.2105 4.7442.9211-.093 2.2106-1.3023 3.9606-3.6279l-1.0132-.8372c-1.3816 1.6744-2.2105 2.6977-2.6711 2.6977-.6447 0-.8289-1.3954-1.2894-4.8372l-2.9474.9302z" fill="#00cc8b"/><path d="m46.3292 24.8373c0-.2791-.3685-.4651-.6448-.3721l-8.5658 1.3023-.7368-1.8604-1.0132.3721.6448 1.6744-4.8816.7442v-.7442c0-.2791 0-.6512 0-.9303h1.5658v-1.3953h-1.5658c0-.2791 0-.6512 0-1.0233h-1.3816v1.1163l-3.7763.1861v1.3023l3.8684-.1861v1.8605l-3.7763.5581c-.2763 0-.4605.2791-.4605.4652 0 .279.0921.4651.3684.5581l4.6053 1.7674h.1842c.0921 0 .1842 0 .2763-.093.1842-.093.2763-.279.1842-.4651v-1.9535c-.0921 0 5.1579-.7442 5.1579-.7442l.7368 1.9535c0 .1861.1842.2791.2763.2791h.4606l8.1052-3.7209c.2763-.0931.3685-.3721.2763-.6512zm-18.0527 3.3488 1.8421-.279v1.0232zm9.6711-.186-.4606-1.2093 4.4211-.6512-4.0526 1.8605z" fill="#3d9ffa"/><path d="m33.0657 22.0466h.2763c.1842 0 .4605-.1861.5526-.3721 0 0 0-.1861 0-.2791 0-.279-.1842-.4651-.3684-.5581 0 0-.1842 0-.2763 0-.2763 0-.4605.186-.5526.3721v.186c0 .2791.1842.4651.3684.5582z" fill="#3d9ffa"/><path d="m22.29 21.4884.829 9.4884h1.3816c0-.093-.829-9.5814-.829-9.5814h-1.3816z" fill="#3d9ffa"/><path d="m31.4088 22.2327v.2791c0 .279.1842.5581.3684.6511h.2764c.2763 0 .4605-.186.5526-.3721 0-.093 0-.186 0-.279 0-.2791-.1842-.4652-.4605-.5582-.0921 0-.1843 0-.2764 0-.2763 0-.4605.1861-.6447.3721z" fill="#3d9ffa"/><path d="m31.8684 21.7675v-1.3023c-.0921 0-5.6184.5581-5.6184.5581v1.3024c.0921 0 5.6184-.5582 5.6184-.5582z" fill="#3d9ffa"/><path d="m41.5403 14.7908-5.3421-1.2093-.2763 1.3024 5.3421 1.2093z" fill="#fa533d"/><path d="m34.8154 18.7908c1.3816-.4651 2.671-.7441 3.7763-.8372.921 0 1.6579 0 2.1184.1861.3684.093.7369.3721.7369.8372 0 .3721-.1843.8372-.6448 1.3023-.7368.7442-1.9342 1.5814-3.5921 2.4186h-.0921l.9211 1.1163c1.5658-.7442 2.7631-1.5814 3.5921-2.4186.921-.9302 1.3815-1.8605 1.2894-2.6047 0-1.4883-1.75-2.3255-4.2368-2.2325-1.2895 0-2.8553.3721-4.1447.8372l.4605 1.3023z" fill="#fa533d"/><path d="m53.6061 15.0698.1842-2.6977h-1.3816c0-.093-.1842 2.8838-.1842 2.8838l-4.0526.6511.2763 1.3023 3.6842-.6511-.4605 7.1628h1.3816c0 .093.4605-7.3489.4605-7.3489l1.75-.279-.1842-1.3024-1.3816.1861z" fill="#c83dfa"/><path d="m48.7241 21.2094-.2763-1.3023-1.8421.8372-1.1053-6.9767-1.2895.186 1.2895 8.6512z" fill="#c83dfa"/><path d="m33.1591 17.3025-1.5658.4651-.1842-.8372h-2.8552c0-.0931-3.2237-.1861-3.2237-.1861h-2.9474l-.2763.7442-1.4737.186v-3.4418-3.4419l.2763-3.16277v-3.53488l4.0527-.18605h4.2368 3.9605v3.34884c.0921 0 0 3.44186 0 3.44186v3.3488c.0921 0 0 3.1628 0 3.1628zm-1.5658-2.0466v-3.1627c.0921 0 0-3.34889 0-3.34889l-.1842-2.97674h-2.9473c0-.09302-3.2237-.18605-3.2237-.18605l-2.8553.18605v2.97674l-.2763 3.34889v3.1627h3.2237l3.2237-.186h2.8552zm-3.3157-6.88368-1.5658.18605-.829-2.04651h1.5658l.9211 1.86046zm3.0394 4.93028-1.4737.8372-2.5789-1.0233-2.4869 1.5814-1.6578-.8372 2.7631-1.5814-1.9342-1.4884.2763-1.3023 2.8553 1.5814 1.3816-1.95349 1.2894-2.69768.9211 1.2093-.829 2.04652-1.3815 2.04655 2.8552 1.4883zm-5.4342-4.27912-1.6579.3721-1.1052-1.95349 1.2894-.37209z" fill="#000"/><path d="m18.606 16.5582-1.1974.4651-2.9474.2791h-3.2236c0-.0931-.9211-1.2093-.9211-1.2093v-3.2559-2.2325l-1.10525.4651-1.10527-1.11628 2.21052-.83721v-4.37209c.0921 0 1.4737.55814 1.4737.55814v3.06977l1.4737-.83721v-3.53489l1.5658-.55814-.1842 3.53489 1.6579-.93023.3684-.46512 1.0131.74419v3.34883l-.0921 3.16275-1.6579.9303-1.2894-1.4884v1.4884l-1.4737.5581v-5.20929l-1.1974.74419v2.2326c-.0921 0 0 2.7907 0 2.7907l.5526.5581h2.1185l2.3026-.1861.5526-.372.6448-1.7675 1.1052 2.1395-.5526 1.1163zm-2.6711-4.4651.2763-.4652v-2.69763-1.30233l-1.3815.93023-.1842 3.62793h1.2894zm-6.72365 2.3255-2.21053 1.1163-1.93421.7442-1.19737-1.3953 2.30263-.7442v-4.83724h-1.75l-.46052-1.39535h2.21052v-3.44186l1.6579-.46512-.18421 3.72093 2.11842-.18604-.46053 1.48837-1.56579.18605v4.37206c-.0921 0 1.75-.9302 1.75-.9302z" fill="#000"/></g></svg>
\ No newline at end of file
diff --git a/src/components/menu-bar/menu-bar.jsx b/src/components/menu-bar/menu-bar.jsx
index 126f0d460..36fbeaf59 100644
--- a/src/components/menu-bar/menu-bar.jsx
+++ b/src/components/menu-bar/menu-bar.jsx
@@ -73,7 +73,7 @@ import dropdownCaret from './dropdown-caret.svg';
 import languageIcon from '../language-selector/language-icon.svg';
 import aboutIcon from './icon--about.svg';
 
-import scratchLogo from './scratch-logo.svg';
+import SiteLogo from './logo.svg';
 
 import sharedMessages from '../../lib/shared-messages';
 
@@ -390,7 +390,7 @@ class MenuBar extends React.Component {
                     <div className={styles.fileGroup}>
                         <div className={classNames(styles.menuBarItem)}>
                             <img
-                                alt="Scratch"
+                                alt="Scratchhh"
                                 className={classNames(styles.scratchLogo, {
                                     [styles.clickable]: typeof this.props.onClickLogo !== 'undefined'
                                 })}
@@ -827,7 +827,7 @@ MenuBar.propTypes = {
 };
 
 MenuBar.defaultProps = {
-    logo: scratchLogo,
+    logo: SiteLogo,
     onShare: () => {}
 };
 
diff --git a/src/components/menu-bar/scratch-logo.svg b/src/components/menu-bar/scratch-logo.svg
deleted file mode 100644
index 28b62731d..000000000
--- a/src/components/menu-bar/scratch-logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" viewBox="0 0 66.1 24.7"><style>.st0{fill:#fff}.st1{fill:#f9a83a}</style><switch><g><g><g><path d="M60.2 24.1c-.8.1-1.3.1-1.5.2-.4.2-1.3.4-2.4.4-1.4 0-2.7-.5-3.8-1.3h-.8c-.3 0-.5 0-.8-.1-1.1.4-2.1.4-2.7.4H48c-1.4.1-2.8-.2-4-.8-.6.2-1.1.3-1.7.3l-3.7.1c-1.7 0-3.2-.6-4.4-1.7-.5 0-1-.1-1.4-.2-.6.7-1.4 1.3-2.4 1.8-1.9.9-4 1-6 .2-.2-.1-.5-.2-.7-.3l-2.3.3h-.7c-.3.1-.5.3-.7.4-1.5.7-2.9.7-3.5.7H16c-1.7 0-3.4-.5-4.7-1.4-.4.1-.9.2-1.3.2-.9.6-2 1-3.2 1.1h-.4c-3.3 0-6-2.5-6.3-5.8v-.1c0-.5-.1-1.6 0-2.8 0-.6.1-1.5.1-1.7 0-.8.2-1.6.5-2.4-.2-.8-.1-1.6 0-2.4v-.3c.1-.7.3-2.1 1-3.5C3 3 5.4 1.5 8.1 1.5 9 1 9.9.8 10.9.8h.3c2 .1 3.8 1.1 4.9 2.7.9-.8 2-1.3 3.2-1.5 2.4-.3 4.4-.4 6.1-.1.9-.8 2.1-1.4 3.3-1.5l2.6-.4h.8c1.5 0 3 .6 4.2 1.6h.2l3.8-.1c1.6 0 3-.1 3.3-.1h.5c1.4 0 2.9.5 4 1.4 1.1-.8 2.4-1.2 3.8-1.2h1.3c1-.6 2.1-1 3.3-1l3.2-.1h.1c3.4 0 6.2 2.8 6.3 6.2 0 1.6-.5 3-1.5 4.2v2.9c.9 1 1.4 2.3 1.5 3.7.2 3.4-2.4 6.3-5.9 6.6z" class="st0"/></g><path d="M60 20.5c-1.3.1-2.1.2-2.3.3l-.1.1c-.3.1-.7.3-1.2.3-.6 0-1.3-.2-1.8-.7-.2-.2-.4-.4-.5-.6h-2.3c-.4 0-.8-.1-1.1-.3-.1.1-.3.1-.4.2-.8.4-1.5.4-2 .4h-.5c-1.5 0-2.7-.5-3.5-1.4-.5.5-1.2.8-1.9.8l-3.7.1c-1.3 0-2.5-1-2.7-2.2-.5.3-1 .5-1.6.5-.6 0-1.2-.2-1.7-.5-.1-.1-.2-.2-.3-.2-.3.2-.7.2-1.1.2H31c-.4 1.2-1.1 2-2.2 2.5-.5.2-1.1.4-1.6.4s-1.1-.1-1.6-.3c-.5-.2-.9-.5-1.2-.8-.2.1-.4.1-.6.2l-2.9.4h-.4c-.3 0-.5 0-.8-.1-.4.4-.9.6-1.3.8-.8.4-1.5.4-2 .4h-.5c-1.8 0-3.2-.8-4-1.9-.8.5-1.8.8-2.7.8h-.6c0 .1-.1.1-.1.2-.5.5-1.2.9-1.9.9h-.2c-1.4 0-2.6-1.1-2.7-2.6v-.1c0-.5-.1-1.4 0-2.4 0-.7.1-1.8.1-1.8 0-.7.3-1.3.7-1.8-.4-.8-.5-1.7-.3-2.7v-.2c.1-.6.2-1.5.6-2.4.7-1.3 2-2 3.5-2H9c.5-.4 1.1-.7 1.8-.7 1.5 0 2.7 1.3 2.7 2.8v1.1c.5-.2 1.1-.3 1.7-.3.3 0 .5 0 .8.1.4-.5 1-.8 1.6-.9.1-.2.2-.3.3-.5.4-.6 1.1-1 1.8-1.1.6-.1 1.8-.2 3.2-.2 1.6 0 2.9.2 3.9.7.3-1.1 1.1-1.9 2.3-2.1l2.6-.4h.4c.8 0 1.5.3 2 .9.2.2.5.6.6.9l.1.3c.5-.3 1-.5 1.6-.5l3.9-.1c1.9 0 3.6-.1 3.6-.2h.2c.7 0 1.5.3 2 .8.4.4.7.9.8 1.5h.2c.3 0 .5 0 .8.1.4-.5 1-.8 1.6-.9.5-.7 1.4-1.3 2.4-1.3h2.6c.5-.6 1.2-1 2.1-1h3.2c1.5 0 2.7 1.2 2.8 2.7 0 1.1-.6 2.1-1.5 2.5v6.1c.8.4 1.4 1.3 1.5 2.3.1 1.5-1.1 2.8-2.6 2.9z" class="st1"/><path d="M32.3 8.5l-.7 3.6 2-.3z" class="st1"/><path d="M8.4 12c-.7-.1-1.1-.6-.9-2v-.2c.2-1.2.3-1.5.9-1.5.2 0 .4.1.6.3.2.2.6.5.8 1.1.2.4.2.7.3 1v.4c0 .2.2.4.5.5.3.1.6-.2.7-.5 0 0 .2-3.8.2-3.9 0-.3-.3-.6-.6-.6s-.6.3-.6.6v1.1c-.5-.5-1.1-1-1.8-1C6.6 7 6.4 8.7 6.3 9.7v.2c-.2 1.9.4 3.1 1.9 3.4 1.6.3 2.7.6 2.7 1.6 0 .4-.2.8-.6 1.1-.4.4-1 .5-1.6.4-.2 0-.3-.1-.5-.1-.2-.1-.8-.4-1-.8-.1-.4-.2-.9-.2-1.2v-.2c0-.3-.3-.6-.6-.6s-.6.3-.6.6c0 0 0 1.2-.1 1.9-.1 1.2 0 2.1 0 2.2 0 .3.3.6.6.6s.6-.3.6-.6v-1.1c.4.3 1 .6 1.7.7.9.2 1.8-.1 2.5-.7.6-.5 1-1.3 1-2 0-2.5-2.5-2.9-3.7-3.1M25.2 10.3c-.1.1-.2.2-.4.3-.1.1-.4.2-.5.2l-.3.1c-.4.2-1 .3-1.6.4V8.5c1.6 0 3 .1 3.3.6v.2c0 .2-.2.6-.5 1m3.5 5.4c-.3-.1-.7.1-.8.4-.2.7-.4.7-.5.8-.1.1-.3 0-.6-.1 0 0-.1-.2-.2-.3-.1-.2-.2-1-.2-1.5 0-1.8-.4-2.8-.9-3.3.3-.2.6-.5.6-.5.7-1 .9-1.8.5-2.5-1-1.7-5.3-1.2-6.7-1-.3 0-.6.4-.5.7 0 .3.4.6.7.5.3 0 .6-.1.9-.1v2.8h-.3c-.3 0-.6.3-.6.6s.3.6.6.6h.3v3.5l-.8.1c-.3 0-.6.4-.5.7 0 .3.4.6.7.5l2.9-.4c.3 0 .6-.4.5-.7 0-.3-.4-.6-.7-.5l-.9.1v-3.5c.6-.1 1.1-.2 1.6-.4h.2c.2 0 .4.1.5.3.2.3.4.9.5 2.4 0 .3.1 1.5.3 2 .1.2.4.7.9.9.4.1.9.3 1.5 0 .5-.3.9-.6 1.1-1.5.4-.2.2-.5-.1-.6M50.5 13.8c-.3 0-.6.3-.6.6v.8c0 .3-.1.7-.2.8-.1.2-.2.3-.4.5-.1.1-.3.2-.5.3-.2.1-.3.1-.7.1h-.4c-1.6.1-1.8-1.2-1.8-1.5v-2.6c.1-1 .3-1.7.7-2 .3-.2.7-.1 1.4.1.8.3 1.3 1.2 1.4 1.2.1.2.4.3.7.3.3-.1.4-.3.4-.6V9.1c0-.3-.3-.6-.6-.6s-.6.3-.6.6v1.1c-.2-.2-.5-.3-.8-.5-.3-.2-1.5-.7-2.4-.1-.7.5-1.2 1.4-1.3 2.9v2.8c.1.9.8 2.7 3 2.7h.3c.4 0 .8 0 1.2-.2.3-.1.6-.3.9-.6.2-.2.3-.4.5-.7.2-.4.3-1.1.4-1.3v-1c0-.2-.3-.4-.6-.4M60.4 17.8c0-.3-.3-.6-.6-.6-.2 0-.5 0-.8.1 0-1 0-3.1-.1-9.9h.9c.3 0 .6-.3.6-.6s-.3-.6-.6-.6l-3.2.1c-.3 0-.6.3-.6.6s.3.6.6.6h1v4.2l-3.6.6V8.5h1c.3 0 .6-.3.6-.6s-.3-.6-.6-.6h-3.2c-.3 0-.6.3-.6.6s.3.6.6.6h1v8.1h-1c-.3 0-.6.3-.6.6s.3.6.6.6l3.3.1c.3 0 .6-.3.6-.6s-.3-.6-.6-.6h-1v-3.1l3.6-.6v4.6c-.8.2-1.4.2-1.7.6-.2.2-.2.6.1.8.2.2.5.1.9 0 .3-.2 1.5-.3 2.9-.4.3-.2.5-.5.5-.8" class="st0"/><path d="M31.6 12.1l.7-3.6 1.3 3.3-2 .3zm5.3 1c-.2.1-.5.2-1.1.5l-.8-1.9-2.3-5.5c0-.1-.1-.3-.2-.3-.1-.1-.3-.2-.5-.2l-2.6.3c-.3 0-.6.3-.5.7 0 .3.3.6.7.5 0 0 1-.1 1.8-.2-.2 1.1-1.1 5.6-1.4 7l-1.8-.1c-.3 0-.6.2-.6.6 0 .3.2.6.6.6l3 .1c.3 0 .6-.2.6-.6 0-.3-.2-.6-.6-.6l.1-.9 2.8-.5.6 1.5c-.5.3-.7.4-1 .7-.2.3-.1.6.1.8.3.2.7.1.9-.1.3-.4 1.4-.9 2.5-1.3.3-.1.5-.5.4-.8-.1-.2-.4-.4-.7-.3" class="st0"/><path d="M44.1 7s-1.8.1-3.8.2l-3.9.1c-.2 0-.3.1-.5.2-.1.1-.2.3-.1.5l.5 3c0 .3.4.6.7.5.3 0 .5-.3.5-.6 0 0-.2-1.6-.4-2.4h2.6v7.9h-1.3c-.3 0-.6.3-.6.6s.3.6.6.6l3.7-.1c.3 0 .6-.3.6-.6s-.3-.6-.6-.6h-1.2V8.4c1 0 1.9-.1 2.5-.1v1.2c0 .6.1.8.1.9.2.3.5.4.8.2.2-.1.3-.4.3-.6 0 0 0-1.4.1-2.2 0-.2 0-.3-.2-.5 0-.2-.2-.3-.4-.3M18.6 14.4c-.3 0-.6.3-.6.6V15.9c0 .2-.1.6-.2.8-.1.2-.2.3-.4.5-.1.1-.3.2-.5.3-.2.1-.3.1-.7.1h-.4c-1.6 0-1.8-1.2-1.8-1.5v-2.6c.1-1 .3-1.7.7-2 .3-.2.7-.1 1.4.1.8.3 1.4 1.2 1.4 1.2.1.2.4.3.7.3.3-.1.4-.3.4-.6V9.8c0-.3-.3-.6-.6-.6s-.6.3-.6.6v1.1c-.2-.2-.5-.4-.8-.5-.4-.2-1.5-.6-2.5-.1-.7.5-1.2 1.4-1.3 2.9V16c.1.9.8 2.7 3.1 2.7h.3c.4 0 .8 0 1.2-.2.3-.1.6-.3.9-.6.2-.2.3-.4.5-.7.2-.4.3-1.1.4-1.3v-1c0-.2-.3-.5-.6-.5" class="st0"/></g></g></switch></svg>

From ff54d1deacb4ea7f309fe8446f2fd9d5f7410eb7 Mon Sep 17 00:00:00 2001
From: Aquino Luane <aquino@macareux.co.jp>
Date: Mon, 23 Dec 2024 15:43:15 +0900
Subject: [PATCH 11/16] feat(menu-bar): update image logo alt

---
 src/components/menu-bar/menu-bar.jsx         | 2 +-
 src/components/stage-header/stage-header.jsx | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/menu-bar/menu-bar.jsx b/src/components/menu-bar/menu-bar.jsx
index 36fbeaf59..360f679da 100644
--- a/src/components/menu-bar/menu-bar.jsx
+++ b/src/components/menu-bar/menu-bar.jsx
@@ -390,7 +390,7 @@ class MenuBar extends React.Component {
                     <div className={styles.fileGroup}>
                         <div className={classNames(styles.menuBarItem)}>
                             <img
-                                alt="Scratchhh"
+                                alt="Map Adventure Lab"
                                 className={classNames(styles.scratchLogo, {
                                     [styles.clickable]: typeof this.props.onClickLogo !== 'undefined'
                                 })}
diff --git a/src/components/stage-header/stage-header.jsx b/src/components/stage-header/stage-header.jsx
index 4084f6bfc..c5204e142 100644
--- a/src/components/stage-header/stage-header.jsx
+++ b/src/components/stage-header/stage-header.jsx
@@ -16,7 +16,7 @@ import largeStageIcon from './icon--large-stage.svg';
 import smallStageIcon from './icon--small-stage.svg';
 import unFullScreenIcon from './icon--unfullscreen.svg';
 
-import scratchLogo from '../menu-bar/scratch-logo.svg';
+import siteLogo from '../menu-bar/logo.svg';
 import styles from './stage-header.css';
 
 const messages = defineMessages({
@@ -73,8 +73,8 @@ const StageHeaderComponent = function (props) {
                     target="_blank"
                 >
                     <img
-                        alt="Scratch"
-                        src={scratchLogo}
+                        alt="Map Adventure Lab"
+                        src={siteLogo}
                     />
                 </a>
             </div>

From 89b5cac2d9074421d7f1604eb406f25e0c11952e Mon Sep 17 00:00:00 2001
From: Aquino Luane <aquino@macareux.co.jp>
Date: Mon, 23 Dec 2024 15:46:19 +0900
Subject: [PATCH 12/16] refact(menu-bar): change variable case

---
 src/components/menu-bar/menu-bar.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/menu-bar/menu-bar.jsx b/src/components/menu-bar/menu-bar.jsx
index 360f679da..c589dd797 100644
--- a/src/components/menu-bar/menu-bar.jsx
+++ b/src/components/menu-bar/menu-bar.jsx
@@ -73,7 +73,7 @@ import dropdownCaret from './dropdown-caret.svg';
 import languageIcon from '../language-selector/language-icon.svg';
 import aboutIcon from './icon--about.svg';
 
-import SiteLogo from './logo.svg';
+import siteLogo from './logo.svg';
 
 import sharedMessages from '../../lib/shared-messages';
 
@@ -827,7 +827,7 @@ MenuBar.propTypes = {
 };
 
 MenuBar.defaultProps = {
-    logo: SiteLogo,
+    logo: siteLogo,
     onShare: () => {}
 };
 

From bf0aeb2bc98ef842a7b5fdd5c8571bf5c14d2c35 Mon Sep 17 00:00:00 2001
From: Aquino Luane <aquino@macareux.co.jp>
Date: Mon, 23 Dec 2024 16:36:54 +0900
Subject: [PATCH 13/16] feat(menu-bar): hide some items in header and user icon

---
 src/components/menu-bar/icon--profile.png | Bin 5213 -> 0 bytes
 src/components/menu-bar/menu-bar.jsx      |  38 ++++++++++++----------
 2 files changed, 21 insertions(+), 17 deletions(-)
 delete mode 100644 src/components/menu-bar/icon--profile.png

diff --git a/src/components/menu-bar/icon--profile.png b/src/components/menu-bar/icon--profile.png
deleted file mode 100644
index 41e62b6140efe34784c1c5fa697f1bf73c236b85..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 5213
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
X?GceYo~S%s00000NkvXXu0mjfu(-5L

diff --git a/src/components/menu-bar/menu-bar.jsx b/src/components/menu-bar/menu-bar.jsx
index 126f0d460..a5ae8caae 100644
--- a/src/components/menu-bar/menu-bar.jsx
+++ b/src/components/menu-bar/menu-bar.jsx
@@ -67,7 +67,6 @@ import styles from './menu-bar.css';
 
 import helpIcon from '../../lib/assets/icon--tutorials.svg';
 import mystuffIcon from './icon--mystuff.png';
-import profileIcon from './icon--profile.png';
 import remixIcon from './icon--remix.svg';
 import dropdownCaret from './dropdown-caret.svg';
 import languageIcon from '../language-selector/language-icon.svg';
@@ -530,8 +529,9 @@ class MenuBar extends React.Component {
                             </MenuBarMenu>
                         </div>
                     </div>
-                    <Divider className={classNames(styles.divider)} />
-                    <div
+                    {/* hide the tutorials button for first release */}
+                    {/* <Divider className={classNames(styles.divider)} /> */}
+                    {/* <div
                         aria-label={this.props.intl.formatMessage(ariaMessages.tutorials)}
                         className={classNames(styles.menuBarItem, styles.hoverable)}
                         onClick={this.props.onOpenTipLibrary}
@@ -542,8 +542,9 @@ class MenuBar extends React.Component {
                         />
                         <FormattedMessage {...ariaMessages.tutorials} />
                     </div>
-                    <Divider className={classNames(styles.divider)} />
-                    {this.props.canEditTitle ? (
+                    <Divider className={classNames(styles.divider)} /> */}
+                    {/* hide this code for first release */}
+                    {/* {this.props.canEditTitle ? (
                         <div className={classNames(styles.menuBarItem, styles.growable)}>
                             <MenuBarItemTooltip
                                 enable
@@ -562,8 +563,9 @@ class MenuBar extends React.Component {
                             userId={this.props.authorId}
                             username={this.props.authorUsername}
                         />
-                    ) : null)}
-                    <div className={classNames(styles.menuBarItem)}>
+                    ) : null)} */}
+                    {/* hide share button for first release */}
+                    {/* <div className={classNames(styles.menuBarItem)}>
                         {this.props.canShare ? (
                             (this.props.isShowingProject || this.props.isUpdating) && (
                                 <ProjectWatcher onDoneUpdating={this.props.onSeeCommunity}>
@@ -572,11 +574,11 @@ class MenuBar extends React.Component {
                                             <ShareButton
                                                 className={styles.menuBarButton}
                                                 isShared={this.props.isShared}
-                                                /* eslint-disable react/jsx-no-bind */
+                                                // eslint-disable react/jsx-no-bind
                                                 onClick={() => {
                                                     this.handleClickShare(waitForUpdate);
                                                 }}
-                                                /* eslint-enable react/jsx-no-bind */
+                                                // eslint-enable react/jsx-no-bind
                                             />
                                         )
                                     }
@@ -590,8 +592,9 @@ class MenuBar extends React.Component {
                             ) : []
                         )}
                         {this.props.canRemix ? remixButton : []}
-                    </div>
-                    <div className={classNames(styles.menuBarItem, styles.communityButtonWrapper)}>
+                    </div> */}
+                    {/* hide community button for first release */}
+                    {/* <div className={classNames(styles.menuBarItem, styles.communityButtonWrapper)}>
                         {this.props.enableCommunity ? (
                             (this.props.isShowingProject || this.props.isUpdating) && (
                                 <ProjectWatcher onDoneUpdating={this.props.onSeeCommunity}>
@@ -599,11 +602,11 @@ class MenuBar extends React.Component {
                                         waitForUpdate => (
                                             <CommunityButton
                                                 className={styles.menuBarButton}
-                                                /* eslint-disable react/jsx-no-bind */
+                                                // eslint-disable react/jsx-no-bind
                                                 onClick={() => {
                                                     this.handleClickSeeCommunity(waitForUpdate);
                                                 }}
-                                                /* eslint-enable react/jsx-no-bind */
+                                                // eslint-enable react/jsx-no-bind
                                             />
                                         )
                                     }
@@ -614,7 +617,7 @@ class MenuBar extends React.Component {
                                 <CommunityButton className={styles.menuBarButton} />
                             </MenuBarItemTooltip>
                         ) : [])}
-                    </div>
+                    </div> */}
                 </div>
 
                 {/* show the proper UI in the account menu, given whether the user is
@@ -728,12 +731,13 @@ class MenuBar extends React.Component {
                                                 styles.accountNavMenu
                                             )}
                                         >
-                                            <img
+                                            {/* hide user icon for first release */}
+                                            {/* <img
                                                 className={styles.profileIcon}
                                                 src={profileIcon}
-                                            />
+                                            /> */}
                                             <span>
-                                                {'scratch-cat'}
+                                                {'username'}
                                             </span>
                                             <img
                                                 className={styles.dropdownCaretIcon}

From b006cc6f184501f4af0d3b26db276259ebc87d48 Mon Sep 17 00:00:00 2001
From: Aquino Luane <aquino@macareux.co.jp>
Date: Mon, 23 Dec 2024 17:03:09 +0900
Subject: [PATCH 14/16] feat(colors.css): change primary color

---
 src/css/colors.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/css/colors.css b/src/css/colors.css
index 6f38510e2..539b67635 100644
--- a/src/css/colors.css
+++ b/src/css/colors.css
@@ -14,7 +14,7 @@ $ui-black-transparent: hsla(0, 0%, 0%, 0.15); /* 15% transparent version of blac
 $text-primary: hsla(225, 15%, 40%, 1); /* #575E75 */
 $text-primary-transparent: hsla(225, 15%, 40%, 0.75);
 
-$motion-primary: hsla(215, 100%, 65%, 1); /* #4C97FF */
+$motion-primary: hsl(208, 38%, 18%); /* #1C2E3E */
 $motion-tertiary: hsla(215, 60%, 50%, 1); /* #3373CC */
 $motion-transparent: hsla(215, 100%, 65%, 0.35); /* 35% transparent version of motion-primary */
 $motion-light-transparent: hsla(215, 100%, 65%, 0.15); /* 15% transparent version of motion-primary */

From 6aad1d3dbd3bdea48234596900e99a0bcde87ea5 Mon Sep 17 00:00:00 2001
From: Aquino Luane <aquino@macareux.co.jp>
Date: Tue, 24 Dec 2024 14:52:24 +0900
Subject: [PATCH 15/16] fix(modal extension): add state in redux to indicate
 that the modal has already been opened

---
 src/components/gui/gui.jsx             | 26 ++++++++++++++++++--------
 src/components/menu-bar/menu-bar.jsx   |  8 +++++++-
 src/containers/gui.jsx                 | 25 +++++++++++++++++++++++--
 src/reducers/gui.js                    |  3 +++
 src/reducers/modal-choose-extension.js | 25 +++++++++++++++++++++++++
 5 files changed, 76 insertions(+), 11 deletions(-)
 create mode 100644 src/reducers/modal-choose-extension.js

diff --git a/src/components/gui/gui.jsx b/src/components/gui/gui.jsx
index d8cc1e220..95230087a 100644
--- a/src/components/gui/gui.jsx
+++ b/src/components/gui/gui.jsx
@@ -39,6 +39,7 @@ import addExtensionIcon from './icon--extensions.svg';
 import codeIcon from './icon--code.svg';
 import costumesIcon from './icon--costumes.svg';
 import soundsIcon from './icon--sounds.svg';
+import { setModalExtension } from '../../reducers/modal-choose-extension.js';
 
 const messages = defineMessages({
     addExtension: {
@@ -90,6 +91,7 @@ const GUIComponent = props => {
         loading,
         logo,
         renderLogin,
+        modalChooseExtensionAlreadyBeenOpened,
         onClickAbout,
         onClickAccountNav,
         onCloseAccountNav,
@@ -100,7 +102,6 @@ const GUIComponent = props => {
         onActivateSoundsTab,
         onActivateTab,
         onClickLogo,
-        showExtension,
         onProjectTelemetryEvent,
         onRequestCloseBackdropLibrary,
         onRequestCloseCostumeLibrary,
@@ -112,10 +113,12 @@ const GUIComponent = props => {
         onTelemetryModalCancel,
         onTelemetryModalOptIn,
         onTelemetryModalOptOut,
+        onShowExtension,
         projectId,
         showComingSoon,
         soundsTabVisible,
         stageSizeMode,
+        setModalExtensionVisibility,
         targetIsStage,
         telemetryModalVisible,
         tipsLibraryVisible,
@@ -126,10 +129,6 @@ const GUIComponent = props => {
         return <Box {...componentProps}>{children}</Box>;
     }
 
-    if(projectId === '0'){
-        showExtension();
-     }
-
     const tabClassNames = {
         tabs: styles.tabs,
         tab: classNames(tabStyles.reactTabsTab, styles.tab),
@@ -143,6 +142,10 @@ const GUIComponent = props => {
         isRendererSupported = Renderer.isSupported();
     }
 
+    if(projectId === '0'){
+        onShowExtension(false);
+     }
+
     return (<MediaQuery minWidth={layout.fullSizeMinWidth}>{isFullSize => {
         const stageSize = resolveStageSize(stageSizeMode, isFullSize);
 
@@ -319,7 +322,7 @@ const GUIComponent = props => {
                                         <button
                                             className={styles.extensionButton}
                                             title={intl.formatMessage(messages.addExtension)}
-                                            onClick={showExtension}
+                                            onClick={() => onShowExtension(true)}
                                         >
                                             <img
                                                 className={styles.extensionButtonIcon}
@@ -400,13 +403,14 @@ GUIComponent.propTypes = {
     isShared: PropTypes.bool,
     loading: PropTypes.bool,
     logo: PropTypes.string,
+    modalChooseExtensionAlreadyBeenOpened: PropTypes.bool,
+    onShowExtension: PropTypes.func,
     onActivateCostumesTab: PropTypes.func,
     onActivateSoundsTab: PropTypes.func,
     onActivateTab: PropTypes.func,
     onClickAccountNav: PropTypes.func,
     onClickLogo: PropTypes.func,
     onCloseAccountNav: PropTypes.func,
-    showExtension: PropTypes.func,
     onLogOut: PropTypes.func,
     onOpenRegistration: PropTypes.func,
     onRequestCloseBackdropLibrary: PropTypes.func,
@@ -426,6 +430,7 @@ GUIComponent.propTypes = {
     showComingSoon: PropTypes.bool,
     soundsTabVisible: PropTypes.bool,
     stageSizeMode: PropTypes.oneOf(Object.keys(STAGE_SIZE_MODES)),
+    setModalExtensionVisibility: PropTypes.func,
     targetIsStage: PropTypes.bool,
     telemetryModalVisible: PropTypes.bool,
     tipsLibraryVisible: PropTypes.bool,
@@ -457,9 +462,14 @@ const mapStateToProps = state => {
         // This is the button's mode, as opposed to the actual current state
         stageSizeMode: state.scratchGui.stageSize.stageSize,
         projectId: state.scratchGui.projectState.projectId,
+        modalChooseExtensionAlreadyBeenOpened: state.scratchGui.modalChooseExtensionAlreadyBeenOpened
     }
 };
 
+const mapDispatchToProps = dispatch => ({
+    setModalExtensionVisibility: (isOpened) => dispatch(setModalExtension(isOpened)),
+});
+
 export default injectIntl(connect(
-    mapStateToProps
+    mapStateToProps, mapDispatchToProps
 )(GUIComponent));
diff --git a/src/components/menu-bar/menu-bar.jsx b/src/components/menu-bar/menu-bar.jsx
index 126f0d460..a29797a12 100644
--- a/src/components/menu-bar/menu-bar.jsx
+++ b/src/components/menu-bar/menu-bar.jsx
@@ -76,6 +76,7 @@ import aboutIcon from './icon--about.svg';
 import scratchLogo from './scratch-logo.svg';
 
 import sharedMessages from '../../lib/shared-messages';
+import { setModalExtension } from '../../reducers/modal-choose-extension.js';
 
 const ariaMessages = defineMessages({
     language: {
@@ -194,6 +195,9 @@ class MenuBar extends React.Component {
             this.props.onClickNew(this.props.canSave && this.props.canCreateNew);
         }
         this.props.onRequestCloseFile();
+        // set modalAlreadyOpened to false so that the modal will show when the new default project renders
+        this.props.setModalExtensionVisibility(false);
+
     }
     handleClickRemix () {
         this.props.onClickRemix();
@@ -821,6 +825,7 @@ MenuBar.propTypes = {
     sessionExists: PropTypes.bool,
     shouldSaveBeforeTransition: PropTypes.func,
     showComingSoon: PropTypes.bool,
+    setModalExtensionVisibility: PropTypes.func,
     userOwnsProject: PropTypes.bool,
     username: PropTypes.string,
     vm: PropTypes.instanceOf(VM).isRequired
@@ -873,7 +878,8 @@ const mapDispatchToProps = dispatch => ({
     onClickRemix: () => dispatch(remixProject()),
     onClickSave: () => dispatch(manualUpdateProject()),
     onClickSaveAsCopy: () => dispatch(saveProjectAsCopy()),
-    onSeeCommunity: () => dispatch(setPlayer(true))
+    onSeeCommunity: () => dispatch(setPlayer(true)),
+    setModalExtensionVisibility: (isOpened) => dispatch(setModalExtension(isOpened)),
 });
 
 export default compose(
diff --git a/src/containers/gui.jsx b/src/containers/gui.jsx
index 20a608c50..f3346c956 100644
--- a/src/containers/gui.jsx
+++ b/src/containers/gui.jsx
@@ -39,8 +39,13 @@ import cloudManagerHOC from '../lib/cloud-manager-hoc.jsx';
 
 import GUIComponent from '../components/gui/gui.jsx';
 import {setIsScratchDesktop} from '../lib/isScratchDesktop.js';
+import { setModalExtension } from '../reducers/modal-choose-extension.js';
 
 class GUI extends React.Component {
+    constructor (props) {
+        super(props);
+        this.handleShowExtension = this.handleShowExtension.bind(this);
+    }
     componentDidMount () {
         setIsScratchDesktop(this.props.isScratchDesktop);
         this.props.onStorageInit(storage);
@@ -56,6 +61,15 @@ class GUI extends React.Component {
             this.props.onProjectLoaded();
         }
     }
+    handleShowExtension(isFromButtonClick = false) {
+        if(isFromButtonClick) {
+            this.props.showExtension();
+        }
+        else if(this.props.projectId === '0' && !this.props.modalChooseExtensionAlreadyBeenOpened) {
+            this.props.setModalExtensionVisibility(true);
+            this.props.showExtension();
+        }
+    }
     render () {
         if (this.props.isError) {
             throw new Error(
@@ -75,6 +89,7 @@ class GUI extends React.Component {
             onVmInit,
             projectHost,
             projectId,
+            showExtension,
             /* eslint-enable no-unused-vars */
             children,
             fetchingProject,
@@ -85,6 +100,7 @@ class GUI extends React.Component {
         return (
             <GUIComponent
                 loading={fetchingProject || isLoading || loadingStateVisible}
+                onShowExtension={(open) => this.handleShowExtension(open)}
                 {...componentProps}
             >
                 {children}
@@ -105,6 +121,7 @@ GUI.propTypes = {
     isScratchDesktop: PropTypes.bool,
     isShowingProject: PropTypes.bool,
     loadingStateVisible: PropTypes.bool,
+    modalChooseExtensionAlreadyBeenOpened: PropTypes.bool,
     onProjectLoaded: PropTypes.func,
     onSeeCommunity: PropTypes.func,
     onStorageInit: PropTypes.func,
@@ -112,6 +129,8 @@ GUI.propTypes = {
     onVmInit: PropTypes.func,
     projectHost: PropTypes.string,
     projectId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    setModalExtensionVisibility: PropTypes.func,
+    // showExtension: PropTypes.func,
     telemetryModalVisible: PropTypes.bool,
     vm: PropTypes.instanceOf(VM).isRequired
 };
@@ -142,6 +161,7 @@ const mapStateToProps = state => {
         isRtl: state.locales.isRtl,
         isShowingProject: getIsShowingProject(loadingState),
         loadingStateVisible: state.scratchGui.modals.loadingProject,
+        modalChooseExtensionAlreadyBeenOpened: state.scratchGui.modalChooseExtensionAlreadyBeenOpened,
         projectId: state.scratchGui.projectState.projectId,
         soundsTabVisible: state.scratchGui.editorTab.activeTabIndex === SOUNDS_TAB_INDEX,
         targetIsStage: (
@@ -155,13 +175,14 @@ const mapStateToProps = state => {
 };
 
 const mapDispatchToProps = dispatch => ({
-    showExtension: () => dispatch(openExtensionLibrary()),
     onActivateTab: tab => dispatch(activateTab(tab)),
     onActivateCostumesTab: () => dispatch(activateTab(COSTUMES_TAB_INDEX)),
     onActivateSoundsTab: () => dispatch(activateTab(SOUNDS_TAB_INDEX)),
     onRequestCloseBackdropLibrary: () => dispatch(closeBackdropLibrary()),
     onRequestCloseCostumeLibrary: () => dispatch(closeCostumeLibrary()),
-    onRequestCloseTelemetryModal: () => dispatch(closeTelemetryModal())
+    onRequestCloseTelemetryModal: () => dispatch(closeTelemetryModal()),
+    showExtension: () => dispatch(openExtensionLibrary()),
+    setModalExtensionVisibility: (isOpened) => dispatch(setModalExtension(isOpened)),
 });
 
 const ConnectedGUI = injectIntl(connect(
diff --git a/src/reducers/gui.js b/src/reducers/gui.js
index 378a3203c..5187010d3 100644
--- a/src/reducers/gui.js
+++ b/src/reducers/gui.js
@@ -18,6 +18,7 @@ import projectChangedReducer, {projectChangedInitialState} from './project-chang
 import projectStateReducer, {projectStateInitialState} from './project-state';
 import projectTitleReducer, {projectTitleInitialState} from './project-title';
 import fontsLoadedReducer, {fontsLoadedInitialState} from './fonts-loaded';
+import modalChooseExtensionReducer, {modalChooseExtensionInitialState} from './modal-choose-extension';
 import restoreDeletionReducer, {restoreDeletionInitialState} from './restore-deletion';
 import stageSizeReducer, {stageSizeInitialState} from './stage-size';
 import targetReducer, {targetsInitialState} from './targets';
@@ -53,6 +54,7 @@ const guiInitialState = {
     projectState: projectStateInitialState,
     projectTitle: projectTitleInitialState,
     fontsLoaded: fontsLoadedInitialState,
+    modalChooseExtensionAlreadyBeenOpened: modalChooseExtensionInitialState,
     restoreDeletion: restoreDeletionInitialState,
     targets: targetsInitialState,
     timeout: timeoutInitialState,
@@ -152,6 +154,7 @@ const guiReducer = combineReducers({
     projectState: projectStateReducer,
     projectTitle: projectTitleReducer,
     fontsLoaded: fontsLoadedReducer,
+    modalChooseExtensionAlreadyBeenOpened: modalChooseExtensionReducer,
     restoreDeletion: restoreDeletionReducer,
     targets: targetReducer,
     timeout: timeoutReducer,
diff --git a/src/reducers/modal-choose-extension.js b/src/reducers/modal-choose-extension.js
new file mode 100644
index 000000000..d395d7dd6
--- /dev/null
+++ b/src/reducers/modal-choose-extension.js
@@ -0,0 +1,25 @@
+const SET_HAS_MODAL_EXTENSION_ALREADY_BEEN_OPENED = 'modalChooseExtension/SET_HAS_MODAL_EXTENSION_ALREADY_BEEN_OPENED';
+
+const initialState = false;
+
+const reducer = function (state, action) {
+    if (typeof state === 'undefined') state = initialState;
+    switch (action.type) {
+    case SET_HAS_MODAL_EXTENSION_ALREADY_BEEN_OPENED:
+        return action.opened;
+    default:
+        return state;
+    }
+};
+const setModalExtension = (isOpened) => {
+    return {
+        type: SET_HAS_MODAL_EXTENSION_ALREADY_BEEN_OPENED,
+        opened: isOpened
+    }
+}
+
+export {
+    reducer as default,
+    initialState as modalChooseExtensionInitialState,
+    setModalExtension
+};

From ef9f42380e2dbb730de072af0c882e20b6f12767 Mon Sep 17 00:00:00 2001
From: Aquino Luane <aquino@macareux.co.jp>
Date: Tue, 24 Dec 2024 15:27:03 +0900
Subject: [PATCH 16/16] fix(gui.jsx): refactor to class component to use
 lifecycle method

---
 src/components/gui/gui.jsx | 596 +++++++++++++++++++------------------
 1 file changed, 300 insertions(+), 296 deletions(-)

diff --git a/src/components/gui/gui.jsx b/src/components/gui/gui.jsx
index 95230087a..599cf8ca9 100644
--- a/src/components/gui/gui.jsx
+++ b/src/components/gui/gui.jsx
@@ -52,323 +52,327 @@ const messages = defineMessages({
 // Cache this value to only retrieve it once the first time.
 // Assume that it doesn't change for a session.
 let isRendererSupported = null;
-
-const GUIComponent = props => {
-    const {
-        accountNavOpen,
-        activeTabIndex,
-        alertsVisible,
-        authorId,
-        authorThumbnailUrl,
-        authorUsername,
-        basePath,
-        backdropLibraryVisible,
-        backpackHost,
-        backpackVisible,
-        blocksTabVisible,
-        cardsVisible,
-        canChangeLanguage,
-        canCreateNew,
-        canEditTitle,
-        canManageFiles,
-        canRemix,
-        canSave,
-        canCreateCopy,
-        canShare,
-        canUseCloud,
-        children,
-        connectionModalVisible,
-        costumeLibraryVisible,
-        costumesTabVisible,
-        enableCommunity,
-        intl,
-        isCreating,
-        isFullScreen,
-        isPlayerOnly,
-        isRtl,
-        isShared,
-        isTelemetryEnabled,
-        loading,
-        logo,
-        renderLogin,
-        modalChooseExtensionAlreadyBeenOpened,
-        onClickAbout,
-        onClickAccountNav,
-        onCloseAccountNav,
-        onLogOut,
-        onOpenRegistration,
-        onToggleLoginOpen,
-        onActivateCostumesTab,
-        onActivateSoundsTab,
-        onActivateTab,
-        onClickLogo,
-        onProjectTelemetryEvent,
-        onRequestCloseBackdropLibrary,
-        onRequestCloseCostumeLibrary,
-        onRequestCloseTelemetryModal,
-        onSeeCommunity,
-        onShare,
-        onShowPrivacyPolicy,
-        onStartSelectingFileUpload,
-        onTelemetryModalCancel,
-        onTelemetryModalOptIn,
-        onTelemetryModalOptOut,
-        onShowExtension,
-        projectId,
-        showComingSoon,
-        soundsTabVisible,
-        stageSizeMode,
-        setModalExtensionVisibility,
-        targetIsStage,
-        telemetryModalVisible,
-        tipsLibraryVisible,
-        vm,
-        ...componentProps
-    } = omit(props, 'dispatch');
-    if (children) {
-        return <Box {...componentProps}>{children}</Box>;
+class GUIComponent extends React.Component {
+    componentDidUpdate() {
+        const { projectId, onShowExtension } = this.props;
+        if (projectId === '0') {
+            onShowExtension(false);
+        }
     }
+    render(){
+        const {
+            children,
+            projectId,
+            showExtension,
+            accountNavOpen,
+            activeTabIndex,
+            alertsVisible,
+            authorId,
+            authorThumbnailUrl,
+            authorUsername,
+            basePath,
+            backdropLibraryVisible,
+            backpackHost,
+            backpackVisible,
+            blocksTabVisible,
+            cardsVisible,
+            canChangeLanguage,
+            canCreateNew,
+            canEditTitle,
+            canManageFiles,
+            canRemix,
+            canSave,
+            canCreateCopy,
+            canShare,
+            canUseCloud,
+            connectionModalVisible,
+            costumeLibraryVisible,
+            costumesTabVisible,
+            enableCommunity,
+            intl,
+            isCreating,
+            isFullScreen,
+            isPlayerOnly,
+            isRtl,
+            isShared,
+            isTelemetryEnabled,
+            loading,
+            logo,
+            renderLogin,
+            modalChooseExtensionAlreadyBeenOpened,
+            onClickAbout,
+            onClickAccountNav,
+            onCloseAccountNav,
+            onLogOut,
+            onOpenRegistration,
+            onToggleLoginOpen,
+            onActivateCostumesTab,
+            onActivateSoundsTab,
+            onActivateTab,
+            onClickLogo,
+            onProjectTelemetryEvent,
+            onRequestCloseBackdropLibrary,
+            onRequestCloseCostumeLibrary,
+            onRequestCloseTelemetryModal,
+            onSeeCommunity,
+            onShare,
+            onShowPrivacyPolicy,
+            onStartSelectingFileUpload,
+            onTelemetryModalCancel,
+            onTelemetryModalOptIn,
+            onTelemetryModalOptOut,
+            onShowExtension,
+            showComingSoon,
+            soundsTabVisible,
+            stageSizeMode,
+            setModalExtensionVisibility,
+            targetIsStage,
+            telemetryModalVisible,
+            tipsLibraryVisible,
+            vm,
+            ...componentProps
+        } = omit(this.props, 'dispatch');
 
-    const tabClassNames = {
-        tabs: styles.tabs,
-        tab: classNames(tabStyles.reactTabsTab, styles.tab),
-        tabList: classNames(tabStyles.reactTabsTabList, styles.tabList),
-        tabPanel: classNames(tabStyles.reactTabsTabPanel, styles.tabPanel),
-        tabPanelSelected: classNames(tabStyles.reactTabsTabPanelSelected, styles.isSelected),
-        tabSelected: classNames(tabStyles.reactTabsTabSelected, styles.isSelected)
-    };
-
-    if (isRendererSupported === null) {
-        isRendererSupported = Renderer.isSupported();
-    }
+        if (children) {
+            return <Box {...componentProps}>{children}</Box>;
+        }
 
-    if(projectId === '0'){
-        onShowExtension(false);
-     }
+        const tabClassNames = {
+            tabs: styles.tabs,
+            tab: classNames(tabStyles.reactTabsTab, styles.tab),
+            tabList: classNames(tabStyles.reactTabsTabList, styles.tabList),
+            tabPanel: classNames(tabStyles.reactTabsTabPanel, styles.tabPanel),
+            tabPanelSelected: classNames(tabStyles.reactTabsTabPanelSelected, styles.isSelected),
+            tabSelected: classNames(tabStyles.reactTabsTabSelected, styles.isSelected)
+        };
 
-    return (<MediaQuery minWidth={layout.fullSizeMinWidth}>{isFullSize => {
-        const stageSize = resolveStageSize(stageSizeMode, isFullSize);
+        if (isRendererSupported === null) {
+            isRendererSupported = Renderer.isSupported();
+        }
+        return (<MediaQuery minWidth={layout.fullSizeMinWidth}>{isFullSize => {
+            const stageSize = resolveStageSize(stageSizeMode, isFullSize);
 
-        return isPlayerOnly ? (
-            <StageWrapper
-                isFullScreen={isFullScreen}
-                isRendererSupported={isRendererSupported}
-                isRtl={isRtl}
-                loading={loading}
-                stageSize={STAGE_SIZE_MODES.large}
-                vm={vm}
-            >
-                {alertsVisible ? (
-                    <Alerts className={styles.alertsContainer} />
-                ) : null}
-            </StageWrapper>
-        ) : (
-            <Box
-                className={styles.pageWrapper}
-                dir={isRtl ? 'rtl' : 'ltr'}
-                {...componentProps}
-            >
-                {telemetryModalVisible ? (
-                    <TelemetryModal
-                        isRtl={isRtl}
-                        isTelemetryEnabled={isTelemetryEnabled}
-                        onCancel={onTelemetryModalCancel}
-                        onOptIn={onTelemetryModalOptIn}
-                        onOptOut={onTelemetryModalOptOut}
-                        onRequestClose={onRequestCloseTelemetryModal}
-                        onShowPrivacyPolicy={onShowPrivacyPolicy}
-                    />
-                ) : null}
-                {loading ? (
-                    <Loader />
-                ) : null}
-                {isCreating ? (
-                    <Loader messageId="gui.loader.creating" />
-                ) : null}
-                {isRendererSupported ? null : (
-                    <WebGlModal isRtl={isRtl} />
-                )}
-                {tipsLibraryVisible ? (
-                    <TipsLibrary />
-                ) : null}
-                {cardsVisible ? (
-                    <Cards />
-                ) : null}
-                {alertsVisible ? (
-                    <Alerts className={styles.alertsContainer} />
-                ) : null}
-                {connectionModalVisible ? (
-                    <ConnectionModal
-                        vm={vm}
-                    />
-                ) : null}
-                {costumeLibraryVisible ? (
-                    <CostumeLibrary
-                        vm={vm}
-                        onRequestClose={onRequestCloseCostumeLibrary}
+            return isPlayerOnly ? (
+                <StageWrapper
+                    isFullScreen={isFullScreen}
+                    isRendererSupported={isRendererSupported}
+                    isRtl={isRtl}
+                    loading={loading}
+                    stageSize={STAGE_SIZE_MODES.large}
+                    vm={vm}
+                >
+                    {alertsVisible ? (
+                        <Alerts className={styles.alertsContainer} />
+                    ) : null}
+                </StageWrapper>
+            ) : (
+                <Box
+                    className={styles.pageWrapper}
+                    dir={isRtl ? 'rtl' : 'ltr'}
+                    {...componentProps}
+                >
+                    {telemetryModalVisible ? (
+                        <TelemetryModal
+                            isRtl={isRtl}
+                            isTelemetryEnabled={isTelemetryEnabled}
+                            onCancel={onTelemetryModalCancel}
+                            onOptIn={onTelemetryModalOptIn}
+                            onOptOut={onTelemetryModalOptOut}
+                            onRequestClose={onRequestCloseTelemetryModal}
+                            onShowPrivacyPolicy={onShowPrivacyPolicy}
+                        />
+                    ) : null}
+                    {loading ? (
+                        <Loader />
+                    ) : null}
+                    {isCreating ? (
+                        <Loader messageId="gui.loader.creating" />
+                    ) : null}
+                    {isRendererSupported ? null : (
+                        <WebGlModal isRtl={isRtl} />
+                    )}
+                    {tipsLibraryVisible ? (
+                        <TipsLibrary />
+                    ) : null}
+                    {cardsVisible ? (
+                        <Cards />
+                    ) : null}
+                    {alertsVisible ? (
+                        <Alerts className={styles.alertsContainer} />
+                    ) : null}
+                    {connectionModalVisible ? (
+                        <ConnectionModal
+                            vm={vm}
+                        />
+                    ) : null}
+                    {costumeLibraryVisible ? (
+                        <CostumeLibrary
+                            vm={vm}
+                            onRequestClose={onRequestCloseCostumeLibrary}
+                        />
+                    ) : null}
+                    {backdropLibraryVisible ? (
+                        <BackdropLibrary
+                            vm={vm}
+                            onRequestClose={onRequestCloseBackdropLibrary}
+                        />
+                    ) : null}
+                    <MenuBar
+                        accountNavOpen={accountNavOpen}
+                        authorId={authorId}
+                        authorThumbnailUrl={authorThumbnailUrl}
+                        authorUsername={authorUsername}
+                        canChangeLanguage={canChangeLanguage}
+                        canCreateCopy={canCreateCopy}
+                        canCreateNew={canCreateNew}
+                        canEditTitle={canEditTitle}
+                        canManageFiles={canManageFiles}
+                        canRemix={canRemix}
+                        canSave={canSave}
+                        canShare={canShare}
+                        className={styles.menuBarPosition}
+                        enableCommunity={enableCommunity}
+                        isShared={isShared}
+                        logo={logo}
+                        renderLogin={renderLogin}
+                        showComingSoon={showComingSoon}
+                        onClickAbout={onClickAbout}
+                        onClickAccountNav={onClickAccountNav}
+                        onClickLogo={onClickLogo}
+                        onCloseAccountNav={onCloseAccountNav}
+                        onLogOut={onLogOut}
+                        onOpenRegistration={onOpenRegistration}
+                        onProjectTelemetryEvent={onProjectTelemetryEvent}
+                        onSeeCommunity={onSeeCommunity}
+                        onShare={onShare}
+                        onStartSelectingFileUpload={onStartSelectingFileUpload}
+                        onToggleLoginOpen={onToggleLoginOpen}
                     />
-                ) : null}
-                {backdropLibraryVisible ? (
-                    <BackdropLibrary
-                        vm={vm}
-                        onRequestClose={onRequestCloseBackdropLibrary}
-                    />
-                ) : null}
-                <MenuBar
-                    accountNavOpen={accountNavOpen}
-                    authorId={authorId}
-                    authorThumbnailUrl={authorThumbnailUrl}
-                    authorUsername={authorUsername}
-                    canChangeLanguage={canChangeLanguage}
-                    canCreateCopy={canCreateCopy}
-                    canCreateNew={canCreateNew}
-                    canEditTitle={canEditTitle}
-                    canManageFiles={canManageFiles}
-                    canRemix={canRemix}
-                    canSave={canSave}
-                    canShare={canShare}
-                    className={styles.menuBarPosition}
-                    enableCommunity={enableCommunity}
-                    isShared={isShared}
-                    logo={logo}
-                    renderLogin={renderLogin}
-                    showComingSoon={showComingSoon}
-                    onClickAbout={onClickAbout}
-                    onClickAccountNav={onClickAccountNav}
-                    onClickLogo={onClickLogo}
-                    onCloseAccountNav={onCloseAccountNav}
-                    onLogOut={onLogOut}
-                    onOpenRegistration={onOpenRegistration}
-                    onProjectTelemetryEvent={onProjectTelemetryEvent}
-                    onSeeCommunity={onSeeCommunity}
-                    onShare={onShare}
-                    onStartSelectingFileUpload={onStartSelectingFileUpload}
-                    onToggleLoginOpen={onToggleLoginOpen}
-                />
-                <Box className={styles.bodyWrapper}>
-                    <Box className={styles.flexWrapper}>
-                        <Box className={styles.editorWrapper}>
-                            <Tabs
-                                forceRenderTabPanel
-                                className={tabClassNames.tabs}
-                                selectedIndex={activeTabIndex}
-                                selectedTabClassName={tabClassNames.tabSelected}
-                                selectedTabPanelClassName={tabClassNames.tabPanelSelected}
-                                onSelect={onActivateTab}
-                            >
-                                <TabList className={tabClassNames.tabList}>
-                                    <Tab className={tabClassNames.tab}>
-                                        <img
-                                            draggable={false}
-                                            src={codeIcon}
-                                        />
-                                        <FormattedMessage
-                                            defaultMessage="Code"
-                                            description="Button to get to the code panel"
-                                            id="gui.gui.codeTab"
-                                        />
-                                    </Tab>
-                                    <Tab
-                                        className={tabClassNames.tab}
-                                        onClick={onActivateCostumesTab}
-                                    >
-                                        <img
-                                            draggable={false}
-                                            src={costumesIcon}
-                                        />
-                                        {targetIsStage ? (
-                                            <FormattedMessage
-                                                defaultMessage="Backdrops"
-                                                description="Button to get to the backdrops panel"
-                                                id="gui.gui.backdropsTab"
+                    <Box className={styles.bodyWrapper}>
+                        <Box className={styles.flexWrapper}>
+                            <Box className={styles.editorWrapper}>
+                                <Tabs
+                                    forceRenderTabPanel
+                                    className={tabClassNames.tabs}
+                                    selectedIndex={activeTabIndex}
+                                    selectedTabClassName={tabClassNames.tabSelected}
+                                    selectedTabPanelClassName={tabClassNames.tabPanelSelected}
+                                    onSelect={onActivateTab}
+                                >
+                                    <TabList className={tabClassNames.tabList}>
+                                        <Tab className={tabClassNames.tab}>
+                                            <img
+                                                draggable={false}
+                                                src={codeIcon}
                                             />
-                                        ) : (
                                             <FormattedMessage
-                                                defaultMessage="Costumes"
-                                                description="Button to get to the costumes panel"
-                                                id="gui.gui.costumesTab"
+                                                defaultMessage="Code"
+                                                description="Button to get to the code panel"
+                                                id="gui.gui.codeTab"
                                             />
-                                        )}
-                                    </Tab>
-                                    <Tab
-                                        className={tabClassNames.tab}
-                                        onClick={onActivateSoundsTab}
-                                    >
-                                        <img
-                                            draggable={false}
-                                            src={soundsIcon}
-                                        />
-                                        <FormattedMessage
-                                            defaultMessage="Sounds"
-                                            description="Button to get to the sounds panel"
-                                            id="gui.gui.soundsTab"
-                                        />
-                                    </Tab>
-                                </TabList>
-                                <TabPanel className={tabClassNames.tabPanel}>
-                                    <Box className={styles.blocksWrapper}>
-                                        <Blocks
-                                            canUseCloud={canUseCloud}
-                                            grow={1}
-                                            isVisible={blocksTabVisible}
-                                            options={{
-                                                media: `${basePath}static/blocks-media/`
-                                            }}
-                                            stageSize={stageSize}
-                                            vm={vm}
-                                        />
-                                    </Box>
-                                    <Box className={styles.extensionButtonContainer}>
-                                        <button
-                                            className={styles.extensionButton}
-                                            title={intl.formatMessage(messages.addExtension)}
-                                            onClick={() => onShowExtension(true)}
+                                        </Tab>
+                                        <Tab
+                                            className={tabClassNames.tab}
+                                            onClick={onActivateCostumesTab}
                                         >
                                             <img
-                                                className={styles.extensionButtonIcon}
                                                 draggable={false}
-                                                src={addExtensionIcon}
+                                                src={costumesIcon}
                                             />
-                                        </button>
-                                    </Box>
-                                    <Box className={styles.watermark}>
-                                        <Watermark />
-                                    </Box>
-                                </TabPanel>
-                                <TabPanel className={tabClassNames.tabPanel}>
-                                    {costumesTabVisible ? <CostumeTab vm={vm} /> : null}
-                                </TabPanel>
-                                <TabPanel className={tabClassNames.tabPanel}>
-                                    {soundsTabVisible ? <SoundTab vm={vm} /> : null}
-                                </TabPanel>
-                            </Tabs>
-                            {backpackVisible ? (
-                                <Backpack host={backpackHost} />
-                            ) : null}
-                        </Box>
+                                            {targetIsStage ? (
+                                                <FormattedMessage
+                                                    defaultMessage="Backdrops"
+                                                    description="Button to get to the backdrops panel"
+                                                    id="gui.gui.backdropsTab"
+                                                />
+                                            ) : (
+                                                <FormattedMessage
+                                                    defaultMessage="Costumes"
+                                                    description="Button to get to the costumes panel"
+                                                    id="gui.gui.costumesTab"
+                                                />
+                                            )}
+                                        </Tab>
+                                        <Tab
+                                            className={tabClassNames.tab}
+                                            onClick={onActivateSoundsTab}
+                                        >
+                                            <img
+                                                draggable={false}
+                                                src={soundsIcon}
+                                            />
+                                            <FormattedMessage
+                                                defaultMessage="Sounds"
+                                                description="Button to get to the sounds panel"
+                                                id="gui.gui.soundsTab"
+                                            />
+                                        </Tab>
+                                    </TabList>
+                                    <TabPanel className={tabClassNames.tabPanel}>
+                                        <Box className={styles.blocksWrapper}>
+                                            <Blocks
+                                                canUseCloud={canUseCloud}
+                                                grow={1}
+                                                isVisible={blocksTabVisible}
+                                                options={{
+                                                    media: `${basePath}static/blocks-media/`
+                                                }}
+                                                stageSize={stageSize}
+                                                vm={vm}
+                                            />
+                                        </Box>
+                                        <Box className={styles.extensionButtonContainer}>
+                                            <button
+                                                className={styles.extensionButton}
+                                                title={intl.formatMessage(messages.addExtension)}
+                                                onClick={() => onShowExtension(true)}
+                                            >
+                                                <img
+                                                    className={styles.extensionButtonIcon}
+                                                    draggable={false}
+                                                    src={addExtensionIcon}
+                                                />
+                                            </button>
+                                        </Box>
+                                        <Box className={styles.watermark}>
+                                            <Watermark />
+                                        </Box>
+                                    </TabPanel>
+                                    <TabPanel className={tabClassNames.tabPanel}>
+                                        {costumesTabVisible ? <CostumeTab vm={vm} /> : null}
+                                    </TabPanel>
+                                    <TabPanel className={tabClassNames.tabPanel}>
+                                        {soundsTabVisible ? <SoundTab vm={vm} /> : null}
+                                    </TabPanel>
+                                </Tabs>
+                                {backpackVisible ? (
+                                    <Backpack host={backpackHost} />
+                                ) : null}
+                            </Box>
 
-                        <Box className={classNames(styles.stageAndTargetWrapper, styles[stageSize])}>
-                            <StageWrapper
-                                isFullScreen={isFullScreen}
-                                isRendererSupported={isRendererSupported}
-                                isRtl={isRtl}
-                                stageSize={stageSize}
-                                vm={vm}
-                            />
-                            <Box className={styles.targetWrapper}>
-                                <TargetPane
+                            <Box className={classNames(styles.stageAndTargetWrapper, styles[stageSize])}>
+                                <StageWrapper
+                                    isFullScreen={isFullScreen}
+                                    isRendererSupported={isRendererSupported}
+                                    isRtl={isRtl}
                                     stageSize={stageSize}
                                     vm={vm}
                                 />
+                                <Box className={styles.targetWrapper}>
+                                    <TargetPane
+                                        stageSize={stageSize}
+                                        vm={vm}
+                                    />
+                                </Box>
                             </Box>
                         </Box>
                     </Box>
+                    <DragLayer />
                 </Box>
-                <DragLayer />
-            </Box>
-        );
-    }}</MediaQuery>);
-};
+            );
+        }}</MediaQuery>)
+    }
+}
 
 GUIComponent.propTypes = {
     accountNavOpen: PropTypes.bool,