Merge branch 'develop' into fix/missing-skip-link

client/common/useKeyDownHandlers.js

@@ -33,7 +33,11 @@ export default function useKeyDownHandlers(keyHandlers) {
     const isMac = navigator.userAgent.toLowerCase().indexOf('mac') !== -1;
     const isCtrl = isMac ? e.metaKey : e.ctrlKey;
     if (e.shiftKey && isCtrl) {
-      handlers.current[`ctrl-shift-${e.key.toLowerCase()}`]?.(e);
+      handlers.current[
+        `ctrl-shift-${
+          /^\d+$/.test(e.code.at(-1)) ? e.code.at(-1) : e.key.toLowerCase()
+        }`
+      ]?.(e);
     } else if (isCtrl) {
       handlers.current[`ctrl-${e.key.toLowerCase()}`]?.(e);
     }

client/components/PreviewNav.jsx

@@ -12,12 +12,14 @@ const PreviewNav = ({ owner, project }) => {
     <nav className="nav preview-nav">
       <div className="nav__items-left">
         <div className="nav__item-logo">
-          <LogoIcon
-            role="img"
-            aria-label={t('Common.p5logoARIA')}
-            focusable="false"
-            className="svg__logo"
-          />
+          <Link to={`/${owner.username}/sketches`}>
+            <LogoIcon
+              role="img"
+              aria-label={t('Common.p5logoARIA')}
+              focusable="false"
+              className="svg__logo"
+            />
+          </Link>
         </div>
         <Link
           className="nav__item"

client/constants.js

@@ -2,7 +2,6 @@
 // multiple files
 export const UPDATE_FILE_CONTENT = 'UPDATE_FILE_CONTENT';
 export const TOGGLE_SKETCH = 'TOGGLE_SKETCH';
-
 export const START_SKETCH = 'START_SKETCH';
 export const STOP_SKETCH = 'STOP_SKETCH';
 

client/i18n-test.js

@@ -1,6 +1,5 @@
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
-
 import translations from '../translations/locales/en-US/translations.json';
 
 i18n.use(initReactI18next).init({

client/modules/IDE/components/AssetSize.jsx

@@ -1,6 +1,5 @@
-import PropTypes from 'prop-types';
 import React from 'react';
-import { connect } from 'react-redux';
+import { useSelector } from 'react-redux';
 import prettyBytes from 'pretty-bytes';
 
 import getConfig from '../../../utils/getConfig';
@@ -18,7 +17,11 @@ const formatPercent = (percent) => {
 };
 
 /* Eventually, this copy should be Total / 250 MB Used */
-const AssetSize = ({ totalSize }) => {
+const AssetSize = () => {
+  const totalSize = useSelector(
+    (state) => state.user.totalSize || state.assets.totalSize
+  );
+
   if (totalSize === undefined) {
     return null;
   }
@@ -40,15 +43,4 @@ const AssetSize = ({ totalSize }) => {
   );
 };
 
-AssetSize.propTypes = {
-  totalSize: PropTypes.number.isRequired
-};
-
-function mapStateToProps(state) {
-  return {
-    user: state.user,
-    totalSize: state.user.totalSize || state.assets.totalSize
-  };
-}
-
-export default connect(mapStateToProps)(AssetSize);
+export default AssetSize;

client/modules/IDE/components/CollectionList/CollectionListRow.jsx

@@ -4,14 +4,88 @@ import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { bindActionCreators } from 'redux';
 import { withTranslation } from 'react-i18next';
+import styled from 'styled-components';
 import MenuItem from '../../../../components/Dropdown/MenuItem';
 import TableDropdown from '../../../../components/Dropdown/TableDropdown';
 import * as ProjectActions from '../../actions/project';
 import * as CollectionsActions from '../../actions/collections';
 import * as IdeActions from '../../actions/ide';
 import * as ToastActions from '../../actions/toast';
 import dates from '../../../../utils/formatDate';
+import { remSize, prop } from '../../../../theme';
 
+const SketchsTableRow = styled.tr`
+  &&& {
+    margin: ${remSize(10)};
+    height: ${remSize(72)};
+    font-size: ${remSize(16)};
+  }
+  &:nth-child(odd) {
+    background: ${prop('tableRowStripeColor')};
+  }
+
+  > th:nth-child(1) {
+    padding-left: ${remSize(12)};
+  }
+
+  > td {
+    padding-left: ${remSize(8)};
+  }
+
+  a {
+    color: ${prop('primaryTextColor')};
+  }
+
+  &.is-deleted > * {
+    font-style: italic;
+  }
+  @media (max-width: 770px) {
+    &&& {
+      margin: 0;
+      position: relative;
+      display: flex;
+      flex-wrap: wrap;
+      padding: ${remSize(15)};
+      height: fit-content;
+      gap: ${remSize(8)};
+      border: 1px solid ${prop('modalBorderColor')};
+      background-color: ${prop('searchBackgroundColor')};
+      > th {
+        padding-left: 0;
+        width: 100%;
+        font-weight: bold;
+        margin-bottom: ${remSize(6)};
+      }
+      > td {
+        padding-left: 0;
+        width: 30%;
+        font-size: ${remSize(14)};
+        color: ${prop('modalBorderColor')};
+      }
+    }
+  }
+`;
+const SketchesTableName = styled.span`
+  &&& {
+    display: flex;
+    align-items: center;
+  }
+`;
+const SketchlistDropdownColumn = styled.td`
+  &&& {
+    position: relative;
+    width: ${remSize(60)};
+  }
+  @media (max-width: 770px) {
+    &&& {
+      position: absolute;
+      top: 0;
+      right: ${remSize(4)};
+      width: auto !important;
+      margin: ${remSize(8)};
+    }
+  }
+`;
 const formatDateCell = (date, mobile = false) =>
   dates.format(date, { showTime: !mobile });
 
@@ -126,18 +200,18 @@ const CollectionListRowBase = (props) => {
   const { collection, mobile } = props;
 
   return (
-    <tr className="sketches-table__row" key={collection.id}>
+    <SketchsTableRow key={collection.id}>
       <th scope="row">
-        <span className="sketches-table__name">{renderCollectionName()}</span>
+        <SketchesTableName>{renderCollectionName()}</SketchesTableName>
       </th>
       <td>{formatDateCell(collection.createdAt, mobile)}</td>
       <td>{formatDateCell(collection.updatedAt, mobile)}</td>
       <td>
         {mobile && 'sketches: '}
         {(collection.items || []).length}
       </td>
-      <td className="sketch-list__dropdown-column">{renderActions()}</td>
-    </tr>
+      <SketchlistDropdownColumn>{renderActions()}</SketchlistDropdownColumn>
+    </SketchsTableRow>
   );
 };
 

client/modules/IDE/components/EditableInput.jsx

@@ -28,7 +28,12 @@ function EditableInput({
   const { t } = useTranslation();
   React.useEffect(() => {
     if (isEditing) {
-      inputRef.current?.focus();
+      const inputElement = inputRef.current;
+      inputElement.setSelectionRange(
+        inputElement.value.length,
+        inputElement.value.length
+      );
+      inputElement.focus();
     }
   }, [isEditing]);
   React.useEffect(() => {

client/modules/IDE/components/Editor/MobileEditor.jsx

@@ -9,7 +9,7 @@ export const EditorContainer = styled.div`
   transform: ${(props) =>
     props.expanded ? 'translateX(50%)' : 'translateX(0)'};
 
-  > header {
+  > div {
     display: flex;
     ${prop('MobilePanel.secondary')}
     > span {

client/modules/IDE/components/Editor/index.jsx

@@ -208,6 +208,10 @@ class Editor extends React.Component {
       if (/^[a-z]$/i.test(e.key) && (mode === 'css' || mode === 'javascript')) {
         this.showHint(_cm);
       }
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        this._cm.getInputField().blur();
+      }
     });
 
     this._cm.getWrapperElement().style[
@@ -235,6 +239,16 @@ class Editor extends React.Component {
 
   componentDidUpdate(prevProps) {
     if (this.props.file.id !== prevProps.file.id) {
+      const fileMode = this.getFileMode(this.props.file.name);
+      if (fileMode === 'javascript') {
+        // Define the new Emmet configuration based on the file mode
+        const emmetConfig = {
+          preview: ['html'],
+          markTagPairs: false,
+          autoRenameTags: true
+        };
+        this._cm.setOption('emmet', emmetConfig);
+      }
       const oldDoc = this._cm.swapDoc(this._docs[this.props.file.id]);
       this._docs[prevProps.file.id] = oldDoc;
       this._cm.focus();
@@ -513,7 +527,7 @@ class Editor extends React.Component {
         {(matches) =>
           matches ? (
             <section className={editorSectionClass}>
-              <header className="editor__header">
+              <div className="editor__header">
                 <button
                   aria-label={this.props.t('Editor.OpenSketchARIA')}
                   className="sidebar__contract"
@@ -538,7 +552,7 @@ class Editor extends React.Component {
                   </span>
                   <Timer />
                 </div>
-              </header>
+              </div>
               <article
                 ref={(element) => {
                   this.codemirrorContainer = element;
@@ -555,7 +569,7 @@ class Editor extends React.Component {
             </section>
           ) : (
             <EditorContainer expanded={this.props.isExpanded}>
-              <header>
+              <>
                 <IconButton
                   onClick={this.props.expandSidebar}
                   icon={FolderIcon}
@@ -564,7 +578,7 @@ class Editor extends React.Component {
                   {this.props.file.name}
                   <UnsavedChangesIndicator />
                 </span>
-              </header>
+              </>
               <section>
                 <EditorHolder
                   ref={(element) => {