Merge branch 'develop' into run-stop-icon-refactor

Author: runningonsideprojects

.github/ISSUE_TEMPLATE/existing-feature-enhancement.yml

@@ -12,5 +12,7 @@ body:
   - type: textarea
     attributes:
       label: Feature enhancement details
+      description: |
+        If you want to include screenshots or screen recordings, paste them into the markdown editor below.
     validations:
       required: true

.github/ISSUE_TEMPLATE/feature-request.yml

@@ -12,5 +12,7 @@ body:
   - type: textarea
     attributes:
       label: Feature request details
+      description: |
+        If you want to include screenshots or screen recordings, paste them into the markdown editor below.
     validations:
       required: true

.github/ISSUE_TEMPLATE/found-a-bug.yml

@@ -38,15 +38,17 @@ body:
   - type: textarea
     attributes:
       label: Actual Behavior
-      placeholder: What is currently happening.
+      description: |
+        Screenshots or screen recordings are preferred if possible. Please paste them into the markdown editor below.
+      placeholder: What is currently happening. Screenshots or other visuals are appreciated.
     validations:
       required: true
 
   - type: textarea
     attributes:
       label: Expected Behavior
       description: |
-        If you want to include screenshots, paste them into the markdown editor below.
+        If you want to include screenshots or screen recordings, paste them into the markdown editor below.
       placeholder: What were you expecting?
     validations:
       required: true

client/modules/IDE/components/FileNode.jsx

@@ -231,6 +231,9 @@ const FileNode = ({
     if (!canEdit) {
       return;
     }
+    if (!isOptionsOpen) {
+      fileOptionsRef.current?.focus();
+    }
     setIsOptionsOpen(!isOptionsOpen);
   };
 

client/modules/IDE/components/Header/MobileNav.jsx

@@ -33,6 +33,7 @@ import { availableLanguages, languageKeyToLabel } from '../../../../i18n';
 import { showToast } from '../../actions/toast';
 import { setLanguage } from '../../actions/preferences';
 import { Overlay } from '../../../App/components/Overlay';
+import packageData from '../../../../../package.json';
 import ProjectName from './ProjectName';
 import CollectionCreate from '../../../User/components/CollectionCreate';
 
@@ -456,6 +457,11 @@ const MoreMenu = () => {
             {t('Nav.Help.Reference')}
           </MobileMenuItem>
           <MobileMenuItem href="/about">{t('About.Title')}</MobileMenuItem>
+          <MobileMenuItem
+            href={`https://github.com/processing/p5.js-web-editor/releases/tag/v${packageData.version}`}
+          >
+            {t('Nav.Help.WebEditorVersion', { version: packageData.version })}
+          </MobileMenuItem>
         </ParentMenuContext.Provider>
       </ul>
     </div>

client/modules/IDE/components/Header/Nav.jsx

@@ -29,6 +29,7 @@ import {
 } from '../../actions/ide';
 import { logoutUser } from '../../../User/actions';
 import { CmControllerContext } from '../../pages/IDEView';
+import packageData from '../../../../../package.json';
 import MobileNav from './MobileNav';
 import useIsMobile from '../../hooks/useIsMobile';
 
@@ -334,6 +335,12 @@ const ProjectMenu = () => {
         >
           {t('Nav.Help.PostOnTheForum')}
         </MenubarItem>
+        <MenubarItem
+          id="help-web-editor-version"
+          href={`https://github.com/processing/p5.js-web-editor/releases/tag/v${packageData.version}`}
+        >
+          {t('Nav.Help.WebEditorVersion', { version: packageData.version })}
+        </MenubarItem>
       </MenubarSubmenu>
       {getConfig('TRANSLATIONS_ENABLED') && <LanguageMenu />}
     </ul>

client/modules/IDE/components/Header/Nav.unit.test.jsx

@@ -6,6 +6,11 @@ import Nav from './Nav';
 
 jest.mock('../../../../utils/generateRandomName');
 
+// Mock the editor version so the snapshot stays stable across releases.
+// The component reads the real version from package.json at runtime (it bumps
+// every release), which would otherwise break these snapshots each release day.
+jest.mock('../../../../../package.json', () => ({ version: '1.2.3' }));
+
 // mock Menubar
 jest.mock('../../../../components/Menubar/Menubar', () => ({
   Menubar: ({ children, className = 'nav__menubar' }) => (

client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap

@@ -478,6 +478,16 @@ exports[`Nav renders dashboard version for mobile 1`] = `
               About
             </a>
           </li>
+          <li>
+            <a
+              aria-disabled="false"
+              href="https://github.com/processing/p5.js-web-editor/releases/tag/v1.2.3"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              Web Editor v1.2.3
+            </a>
+          </li>
         </ul>
       </div>
     </div>
@@ -659,6 +669,9 @@ exports[`Nav renders editor version for desktop 1`] = `
               <li>
                 Post on the Forum
               </li>
+              <li>
+                Web Editor v1.2.3
+              </li>
             </ul>
           </li>
         </ul>
@@ -1090,6 +1103,16 @@ exports[`Nav renders editor version for mobile 1`] = `
               About
             </a>
           </li>
+          <li>
+            <a
+              aria-disabled="false"
+              href="https://github.com/processing/p5.js-web-editor/releases/tag/v1.2.3"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              Web Editor v1.2.3
+            </a>
+          </li>
         </ul>
       </div>
     </div>

client/styles/components/_toast.scss

@@ -5,24 +5,32 @@
     color: getThemifyVariable('toast-text-color');
     background-color: getThemifyVariable('toast-background-color');
   }
-  padding: #{math.div(10, $base-font-size)}rem;
+  padding: #{math.div(10, $base-font-size)}rem #{math.div(20, $base-font-size)}rem;
   position: fixed;
-  top: 0;
+  top: #{math.div(20, $base-font-size)}rem; 
   left: 50%;
-  transform: translate(-50%, 0);
-  min-width: #{math.div(375, $base-font-size)}rem; //500px
-  font-size: #{math.div(20, $base-font-size)}rem;
+  transform: translateX(-50%);
+  min-width: #{math.div(360, $base-font-size)}rem; 
+  font-size: #{math.div(16, $base-font-size)}rem;
+  border-radius: #{math.div(8, $base-font-size)}rem;
   display: flex;
-  z-index: 9999;
   align-items: center;
   justify-content: space-between;
+  z-index: 9999;
+  transition: all 0.3s ease-in-out;
   box-shadow: 0 6px 6px 0 rgba(0,0,0,0.10);
 }
 
 .toast__close {
   @include themify() {
     @extend %icon-toast;
   }
-  padding-top: #{math.div(10, $base-font-size)}rem;
-  margin-left: #{math.div(40, $base-font-size)}rem;
-}
+  padding-top: #{math.div(6, $base-font-size)}rem;
+  margin-left: #{math.div(24, $base-font-size)}rem;
+  cursor: pointer;
+  opacity: 0.7;
+
+  &:hover {
+    opacity: 1;
+  }
+}

common/p5Versions.js

@@ -1,11 +1,12 @@
-export const currentP5Version = '2.3.2';
+export const currentP5Version = '2.3.4';
 
 // Generated from https://www.npmjs.com/package/p5?activeTab=versions
 // Run this in the console:
 // JSON.stringify([...document.querySelectorAll('._132722c7')].map(n => n.innerText), null, 2)
 // TODO: use their API for this to grab these at build time?
 export const p5Versions = [
-  { version: '2.3.3', label: '(Latest)' },
+  { version: '2.3.4', label: '(Latest)' },
+  '2.3.2',
   '2.3.2',
   '2.3.1',
   '2.3.0',