merge old develop branch into connie's cm develop branch

Author: khanniie

.github/CONTRIBUTING.md

@@ -53,7 +53,7 @@ Issues with these labels are a great place to start!
 - [Need Steps to Reproduce](https://github.com/processing/p5.js-web-editor/labels/Needs%20Steps%20to%20Reproduce)
 - [Ready for Work](https://github.com/processing/p5.js-web-editor/labels/Ready%20for%20Work)
 
-A breakdown of what each label means can be found in the [Preparing an Issue Guide](#preparing-an-issue). 
+A breakdown of what each label means can be found in the [Preparing an Issue Guide](../contributor_docs/preparing_an_issue.md). 
 
 When approaching these issues, know that it's okay to not know how to fix an issue! Feel free to ask questions about to approach the problem. We are all here to learn and make something awesome. Someone from the community will help you out, and asking questions is a great way to learn about the p5.js editor, its file structure, and development process.
 
@@ -83,7 +83,7 @@ Before submitting a pull request, make sure that:
 ---
 
 ## Ideas for Getting Started
-* Use the [p5.js Editor](https://editor.p5js.org)! Find a bug? Think of something you think would add to the project? Reference the [Preparing an Issue Guide](#preparing-an-issue) and open an issue.
+* Use the [p5.js Editor](https://editor.p5js.org)! Find a bug? Think of something you think would add to the project? Reference the [Preparing an Issue Guide](../contributor_docs/preparing_an_issue.md) and open an issue.
 * Expand an existing issue. Sometimes issues are missing steps to reproduce, or need suggestions for potential solutions. Sometimes they need another voice saying, "this is really important!"
 * Try getting the project running locally on your computer by following the [installation steps](./../contributor_docs/installation.md).
 * Look through the documentation in the [developer docs](../contributor_docs/) and the [development guide](./../contributor_docs/development.md). Is there anything that could be expanded? Is there anything missing?

Dockerfile

@@ -14,6 +14,7 @@ COPY .babelrc index.js nodemon.json ./
 COPY ./webpack ./webpack
 COPY client ./client
 COPY server ./server
+COPY common ./common
 COPY translations/locales ./translations/locales
 COPY public ./public
 CMD ["npm", "start"]

client/common/icons.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { prop } from '../theme';
 import SortArrowUp from '../images/sort-arrow-up.svg';
 import SortArrowDown from '../images/sort-arrow-down.svg';
 import Github from '../images/github.svg';
@@ -35,20 +34,20 @@ import Copy from '../images/copy.svg';
 function withLabel(SvgComponent) {
   const StyledIcon = styled(SvgComponent)`
     &&& {
-      color: ${prop('Icon.default')};
+      color: ${(props) => props.Icon?.default};
       & g,
       & path,
       & polygon {
         opacity: 1;
-        fill: ${prop('Icon.default')};
+        fill: ${(props) => props.Icon?.default};
       }
       &:hover {
-        color: ${prop('Icon.hover')};
+        color: ${(props) => props.Icon?.hover};
         & g,
         & path,
         & polygon {
           opacity: 1;
-          fill: ${prop('Icon.hover')};
+          fill: ${(props) => props.Icon?.hover};
         }
       }
     }

client/i18n.js

@@ -21,6 +21,8 @@ import {
   enIN
 } from 'date-fns/locale';
 
+import getPreferredLanguage from './utils/language-utils';
+
 const fallbackLng = ['en-US'];
 
 export const availableLanguages = [
@@ -42,6 +44,21 @@ export const availableLanguages = [
   'ur'
 ];
 
+const detectedLanguage = getPreferredLanguage(
+  availableLanguages,
+  fallbackLng[0]
+);
+
+let initialLanguage = detectedLanguage;
+
+// if user has a saved preference (e.g., from redux or window.__INITIAL_STATE__), use that
+if (
+  window.__INITIAL_STATE__?.preferences?.language &&
+  availableLanguages.includes(window.__INITIAL_STATE__.preferences.language)
+) {
+  initialLanguage = window.__INITIAL_STATE__.preferences.language;
+}
+
 export function languageKeyToLabel(lang) {
   const languageMap = {
     be: 'বাংলা',
@@ -104,7 +121,7 @@ i18n
   // .use(LanguageDetector)// to detect the language from currentBrowser
   .use(Backend) // to fetch the data from server
   .init({
-    lng: 'en-US',
+    lng: initialLanguage,
     fallbackLng, // if user computer language is not on the list of available languages, than we will be using the fallback language specified earlier
     debug: false,
     backend: options,

client/images/cross.svg

@@ -130,10 +130,22 @@ const About = () => {
             <Link to="/code-of-conduct">{t('About.CodeOfConduct')}</Link>
           </div>
           <p>
-            {t('About.WebEditor')}: <span>v{packageData?.version}</span>
+            <a
+              href="https://github.com/processing/p5.js-web-editor/releases"
+              target="_blank"
+              rel="noreferrer"
+            >
+              {t('About.WebEditor')}: <span>v{packageData?.version}</span>
+            </a>
           </p>
           <p>
-            p5.js: <span>v{p5version}</span>
+            <a
+              href="https://github.com/processing/p5.js/releases"
+              target="_blank"
+              rel="noreferrer"
+            >
+              p5.js: <span>v{p5version}</span>
+            </a>
           </p>
         </Footer>
       </AboutPageContent>

client/modules/About/pages/About.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { CrossIcon } from '../../../common/icons';
+
+/**
+ * Banner displays a dismissible announcement bar with a link and a close icon.
+ * It's typically used to highlight opportunities, but use and design can be flexible.
+ *
+ * This component is **presentational only** — visibility logic (open/close state) should be
+ * controlled by the parent via the `onClose` handler.
+ *
+ * @param {Object} props
+ * @param {function} props.onClose - Function called when the user clicks the close (✕) button
+ * @returns {JSX.Element} The banner component with a call-to-action link and a close button
+ *
+ * @example
+ * const [showBanner, setShowBanner] = useState(true);
+ *
+ * {showBanner && (
+ *   <Banner onClose={() => setShowBanner(false)} />
+ * )}
+ */
+
+const Banner = ({ onClose }) => {
+  // URL can be updated depending on the opportunity or announcement.
+  const bannerURL = 'https://openprocessing.org/curation/89576';
+  const bannerCopy = (
+    <>
+      We’re accepting p5.js sketches for a special curation exploring mental
+      health and the newest features in p5.js 2.0!{' '}
+      <span style={{ fontWeight: 600 }}>Submit by July 13!</span>
+    </>
+  );
+
+  return (
+    <div className="banner">
+      <a href={bannerURL}>{bannerCopy}</a>
+      <button className="banner-close-button" onClick={onClose}>
+        <CrossIcon Icon={{ default: '#000', hover: '#333' }} />
+      </button>
+    </div>
+  );
+};
+
+Banner.propTypes = {
+  onClose: PropTypes.func.isRequired
+};
+
+export default Banner;

client/modules/IDE/components/Banner.jsx

@@ -215,7 +215,7 @@ function Editor({
           <section className={editorSectionClass}>
             <div className="editor__header">
               <button
-                aria-label={t('Editor.OpenSketchARIA')}
+                aria-label={t('Editor.CloseSketchARIA')}
                 className="sidebar__contract"
                 onClick={() => {
                   collapseSidebar();
@@ -225,7 +225,7 @@ function Editor({
                 <LeftArrowIcon focusable="false" aria-hidden="true" />
               </button>
               <button
-                aria-label={t('Editor.CloseSketchARIA')}
+                aria-label={t('Editor.OpenSketchARIA')}
                 className="sidebar__expand"
                 onClick={expandSidebar}
               >

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

@@ -378,7 +378,7 @@ const AuthenticatedUserMenu = () => {
           {t('Nav.Auth.MyAssets')}
         </MenubarItem>
         <MenubarItem id="account-settings" href="/account">
-          {t('Preferences.Settings')}
+          {t('Nav.Auth.MyAccount')}
         </MenubarItem>
         <MenubarItem id="account-logout" onClick={() => dispatch(logoutUser())}>
           {t('Nav.Auth.LogOut')}

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

@@ -335,7 +335,7 @@ exports[`Nav renders dashboard version for mobile 1`] = `
           >
             <test-file-stub
               aria-hidden="true"
-              classname="icons__StyledIcon-sc-xmer15-0 dStXqm"
+              classname="icons__StyledIcon-sc-xmer15-0 kjSZIe"
               focusable="false"
             />
           </button>
@@ -351,7 +351,7 @@ exports[`Nav renders dashboard version for mobile 1`] = `
         >
           <test-file-stub
             aria-hidden="true"
-            classname="icons__StyledIcon-sc-xmer15-0 dStXqm"
+            classname="icons__StyledIcon-sc-xmer15-0 kjSZIe"
             focusable="false"
           />
         </button>
@@ -930,7 +930,7 @@ exports[`Nav renders editor version for mobile 1`] = `
           >
             <test-file-stub
               aria-hidden="true"
-              classname="icons__StyledIcon-sc-xmer15-0 dStXqm"
+              classname="icons__StyledIcon-sc-xmer15-0 kjSZIe"
               focusable="false"
             />
           </button>
@@ -946,7 +946,7 @@ exports[`Nav renders editor version for mobile 1`] = `
         >
           <test-file-stub
             aria-hidden="true"
-            classname="icons__StyledIcon-sc-xmer15-0 dStXqm"
+            classname="icons__StyledIcon-sc-xmer15-0 kjSZIe"
             focusable="false"
           />
         </button>