Feat/privatesketch

.eslintrc

@@ -29,6 +29,7 @@
         "tsx": "never"
       }
     ],
+    "react/jsx-filename-extension": [1, { "extensions": [".jsx", ".tsx"] }],
     "comma-dangle": 0,  // not sure why airbnb turned this on. gross!
     "default-param-last": 0,
     "no-else-return" :0,
@@ -126,7 +127,12 @@
     {
       "files": ["*.ts", "*.tsx"],
       "parser": "@typescript-eslint/parser",
-      "plugins": ["@typescript-eslint"]
+      "plugins": ["@typescript-eslint"],
+      "rules": {
+        "no-use-before-define": "off",
+        "import/no-extraneous-dependencies": "off",
+        "no-unused-vars": "off"
+      }
     },
     {
       "files": ["*.stories.@(js|jsx|ts|tsx)"],

client/components/SkipLink.test.tsx

@@ -0,0 +1,40 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import '@testing-library/jest-dom';
+import SkipLink from './SkipLink';
+
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key
+  })
+}));
+
+describe('SkipLink', () => {
+  const defaultProps = {
+    targetId: 'main-content',
+    text: 'goToMain'
+  };
+
+  test('renders with correct href and text', () => {
+    render(<SkipLink {...defaultProps} />);
+    const link = screen.getByRole('link');
+
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveAttribute('href', '#main-content');
+    expect(link).toHaveTextContent('SkipLink.goToMain');
+  });
+
+  test('adds "focus" class on focus and removes it on blur', () => {
+    render(<SkipLink {...defaultProps} />);
+    const link = screen.getByRole('link');
+
+    expect(link.className).toBe('skip_link');
+
+    fireEvent.focus(link);
+    expect(link.className).toContain('focus');
+
+    fireEvent.blur(link);
+    expect(link.className).toBe('skip_link');
+  });
+});

client/components/SkipLink.jsx → client/components/SkipLink.tsx

@@ -1,9 +1,13 @@
 import React, { useState } from 'react';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 
-const SkipLink = ({ targetId, text }) => {
+type SkipLinkProps = {
+  targetId: string,
+  text: string
+};
+
+const SkipLink = ({ targetId, text }: SkipLinkProps) => {
   const [focus, setFocus] = useState(false);
   const { t } = useTranslation();
   const handleFocus = () => {
@@ -27,9 +31,4 @@ const SkipLink = ({ targetId, text }) => {
   );
 };
 
-SkipLink.propTypes = {
-  targetId: PropTypes.string.isRequired,
-  text: PropTypes.string.isRequired
-};
-
 export default SkipLink;

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

@@ -249,11 +249,9 @@
   const userIsOwner = user?.username === project.owner?.username;
   const Logo = AsteriskIcon;
 
-  const showPrivacyToggle =
-    project?.owner && title === project.name && userIsOwner;
   const showOwner = project?.owner && title === project.name && !userIsOwner;
 
   const toggleVisibility = (e) => {
     try {
       const isChecked = e.target.checked;
       dispatch(
@@ -274,17 +272,6 @@
       </LogoContainer>
       <Title>
         <h1>{title === project?.name ? <ProjectName /> : title}</h1>
-        {showPrivacyToggle && (
-          <main className="toolbar__makeprivate">
-            <p>Private</p>
-            <input
-              className="toolbar__togglevisibility"
-              type="checkbox"
-              onChange={toggleVisibility}
-              defaultChecked={project.visibility === 'Private'}
-            />
-          </main>
-        )}
         {showOwner && <h5>by {project?.owner?.username}</h5>}
       </Title>
 

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

@@ -1,4 +1,4 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
@@ -122,7 +122,6 @@
           </div>
         )}
 
-        {/* ✅ Still show owner if not you */}
         {project?.owner && !userIsOwner && (
           <p className="toolbar__project-owner">
             {t('Toolbar.By')}{' '}

client/modules/IDE/components/SketchListRowBase.jsx

@@ -125,7 +125,7 @@ const SketchListRowBase = ({
       <th scope="row">{name}</th>
       <td>{formatDateCell(sketch.createdAt, mobile)}</td>
       <td>{formatDateCell(sketch.updatedAt, mobile)}</td>
-      <td hidden={!userIsOwner}>
+      <td hidden={!userIsOwner || mobile}>
         <VisibilityDropdown
           sketch={sketch}
           onVisibilityChange={handleVisibilityChange}

client/styles/components/_visibility-dropdown.scss

@@ -45,7 +45,7 @@
 
   @include themify() {
     border-bottom: 1px solid getThemifyVariable("modal-border-color");
-    background-color: white;
+    background-color: getThemifyVariable("modal-background-color");
   }
 
   &:last-child {
@@ -54,14 +54,20 @@
 
   &:hover {
     @include themify() {
-      background-color: getThemifyVariable("table-row-stripe-color") !important; 
+      background-color: getThemifyVariable("file-selected-color") !important; 
     }
   }
 
   &.selected {
     @include themify() {
-      background-color: getThemifyVariable("search-background-color");
+      background-color: getThemifyVariable("table-row-stripe-color");
     }
+
+    // &:hover {
+    //   @include themify() {
+    //     background-color: getThemifyVariable("table-row-stripe-color") !important;
+    //   }
+    // }
   }
 }
 

common/p5Versions.js

@@ -5,10 +5,12 @@ export const currentP5Version = '1.11.8'; // Don't update to 2.x until 2026
 // 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 = [
+  '2.0.4',
   '2.0.3',
   '2.0.2',
   '2.0.1',
   '2.0.0',
+  '1.11.9',
   '1.11.8',
   '1.11.7',
   '1.11.6',

contributor_docs/preparing_a_pull_request.md

@@ -8,6 +8,7 @@ Pull-requests are easier when your code is up to date!
 Before submitting a pull request, make sure that:
 
 - Your work is related to an issue. **Pull requests that do not have an associated issue will not be accepted.** 
+- **The issue is not already assigned to another contributor.** We follow a "first assigned, first served" approach to avoid duplicated work. If you open a PR for an issue that someone else is already working on, your PR will be closed.
 - Your work adheres to the style guidelines and fits in with the rest of the codebase.
 - You ran the project locally and tested your changes. Pay special attention to any specific areas of the p5.js editor that may be affected by your changes. Does everything still work as before? Great!