Merge branch 'develop' of https://github.com/live-codes/livecodes into i18n/develop

Author: livecodes-ci[bot]

src/livecodes/UI/deploy.ts

@@ -222,7 +222,7 @@ export const createDeployUI = async ({
     await publish(user, name, message, commitSource, newRepo);
   });
 
-  modal.show(deployContainer, { isAsync: true });
+  modal.show(deployContainer, { isAsync: true, autoFocus: false });
   newRepoNameInput.focus();
 
   if (!user) return;

src/livecodes/UI/import.ts

@@ -268,6 +268,6 @@ export const createImportUI = ({
     showScreen('open');
   });
 
-  modal.show(importContainer, { isAsync: true });
+  modal.show(importContainer, { isAsync: true, autoFocus: false });
   getUrlImportInput(importContainer).focus();
 };

src/livecodes/UI/info.ts

@@ -29,7 +29,7 @@ export const createProjectInfoUI = async (
   const div = document.createElement('div');
   div.innerHTML = infoScreen;
   const projectInfoContainer = div.firstChild as HTMLElement;
-  modal.show(projectInfoContainer, { onClose: () => updateInfo() });
+  modal.show(projectInfoContainer, { onClose: () => updateInfo(), autoFocus: false });
 
   const titleInput = UI.getInfoTitleInput();
   titleInput.value = config.title;

src/livecodes/UI/modal.ts

@@ -61,7 +61,6 @@ export const createModal = (deps: {
       modal.showModal();
     }
     overlay.classList.remove('hidden');
-
     setTimeout(() => {
       if (scrollToSelector) {
         const target = container.querySelector<HTMLElement>(scrollToSelector);

src/livecodes/UI/resources.ts

@@ -31,7 +31,7 @@ export const createExternalResourcesUI = ({
   const div = document.createElement('div');
   div.innerHTML = resourcesScreen;
   const resourcesContainer = div.firstChild as HTMLElement;
-  modal.show(resourcesContainer, { onClose: () => updateResources() });
+  modal.show(resourcesContainer, { onClose: () => updateResources(), autoFocus: false });
 
   const externalResources = getExternalResourcesTextareas();
   externalResources.forEach((textarea) => {

src/livecodes/UI/sync-ui.ts

@@ -202,7 +202,7 @@ export const createSyncUI = async ({
     updateSyncStatus({ inProgress: false, lastSync });
   });
 
-  modal.show(syncContainer, { isAsync: true });
+  modal.show(syncContainer, { isAsync: true, autoFocus: false });
   newRepoNameInput.focus();
 
   if (!user) return;

src/livecodes/core.ts

@@ -579,7 +579,7 @@ const updateEditors = async (editors: Editors, config: Config) => {
 
 const showMode = (mode?: Config['mode'], view?: Config['view']) => {
   if (!mode) {
-    mode = 'full';
+    mode = getConfig().mode;
   }
   if (!view) {
     view = getConfig().view;
@@ -1404,7 +1404,7 @@ const applyConfig = async (newConfig: Partial<Config>) => {
     loadSettings(currentConfig);
   }
   if (newConfig.mode || newConfig.view) {
-    window.deps.showMode(
+    window.deps?.showMode?.(
       newConfig.mode ?? currentConfig.mode,
       newConfig.view ?? currentConfig.view,
     );
@@ -2877,7 +2877,7 @@ const handleEditorTools = () => {
     if (newMode === 'focus' && consoleIsEnabled) {
       toolsPane?.setActiveTool('console');
     }
-    showMode(newMode, config.view);
+    window.deps?.showMode?.(newMode, config.view);
   });
 
   eventsManager.addEventListener(UI.getCopyButton(), 'click', () => {
@@ -3455,7 +3455,7 @@ const handleOpen = () => {
 
 const handleImport = () => {
   const createImportUI = async () => {
-    modal.show(loadingMessage(), { size: 'small' });
+    modal.show(loadingMessage(), { size: 'small', autoFocus: false });
     const importModule: typeof import('./UI/import') = await import(baseUrl + '{{hash:import.js}}');
     importModule.createImportUI({
       baseUrl,
@@ -3639,7 +3639,7 @@ const handleDeploy = () => {
       );
       return;
     }
-    modal.show(loadingMessage(), { size: 'small' });
+    modal.show(loadingMessage(), { size: 'small', autoFocus: false });
 
     const getProjectDeployRepo = async () => {
       if (!projectId) return;
@@ -3690,7 +3690,7 @@ const handleSync = () => {
       );
       return;
     }
-    modal.show(loadingMessage(), { size: 'small' });
+    modal.show(loadingMessage(), { size: 'small', autoFocus: false });
 
     const syncUIModule: typeof import('./UI/sync-ui') = await import(
       baseUrl + '{{hash:sync-ui.js}}'
@@ -4374,7 +4374,7 @@ const handleExternalResources = () => {
       dispatchChangeEvent();
     };
 
-    modal.show(loadingMessage(), { size: 'small' });
+    modal.show(loadingMessage(), { size: 'small', autoFocus: false });
     const resourcesModule: typeof import('./UI/resources') = await import(
       baseUrl + '{{hash:resources.js}}'
     );

src/livecodes/styles/app.scss

@@ -887,6 +887,7 @@ a#result-button {
   display: flex;
   flex-direction: column;
   height: 100%;
+  justify-content: flex-end;
   overflow: hidden;
   position: relative;
   top: 0;
@@ -981,9 +982,8 @@ a#result-button {
 
   &#editor-tools {
     align-items: center;
-    bottom: 0;
     display: flex;
-    position: absolute;
+    flex-grow: 0;
 
     #editor-status {
       background-color: transparent;
@@ -1274,6 +1274,7 @@ a.tools-pane-title {
   color: var(--link);
   display: flex !important;
   justify-content: center;
+  overflow: hidden;
   position: relative;
 
   &.gutter-vertical {