Expand the ide toolbar to include the user and a back button

web/src/components/IdeCascadeStudio/IdeCascadeStudio.js

@@ -43,6 +43,11 @@ const IdeCascadeStudio = ({ part, saveCode, loading, error }) => {
             })
           }}
           onExport={(type) => threejsViewport[`saveShape${type}`]()}
+          userNamePart={{
+            userName: part.user.userName,
+            partTitle: part.title,
+            image: part?.user?.image,
+          }}
         />
       </div>
     </>

web/src/components/IdePartCell/IdePartCell.js

@@ -13,6 +13,7 @@ export const QUERY = gql`
       createdAt
       user {
         id
+        userName
       }
     }
   }

web/src/components/IdeToolbar/IdeToolbar.js

@@ -1,9 +1,11 @@
 import { useState } from 'react'
 import Popover from '@material-ui/core/Popover'
+import { Link, routes, navigate } from '@redwoodjs/router'
 
 import Button from 'src/components/Button'
+import ImageUploader from 'src/components/ImageUploader'
 
-const IdeToolbar = ({ canEdit, isChanges, onSave, onExport }) => {
+const IdeToolbar = ({ canEdit, isChanges, onSave, onExport, userNamePart }) => {
   const [anchorEl, setAnchorEl] = useState(null)
 
   const handleClick = (event) => {
@@ -22,6 +24,32 @@ const IdeToolbar = ({ canEdit, isChanges, onSave, onExport }) => {
       id="cadhub-ide-toolbar"
       className="flex bg-gradient-to-r from-gray-900 to-indigo-900 pt-1"
     >
+      <div className="flex items-center">
+        <div className="h-8 w-8 ml-4">
+          <ImageUploader
+            className="rounded-full object-cover"
+            onImageUpload={() => {}}
+            aspectRatio={1}
+            imageUrl={userNamePart?.image}
+            width={80}
+          />
+        </div>
+        <div className="text-indigo-400 ml-2 mr-8">
+          <Link to={routes.user2({ userName: userNamePart?.userName })}>
+            {userNamePart?.userName}
+          </Link>
+        </div>
+      </div>
+      <Button
+        iconName="arrow-left"
+        className="ml-3 shadow-md hover:shadow-lg border-indigo-600 border-2 border-opacity-0 hover:border-opacity-100 bg-indigo-800 text-indigo-200"
+        shouldAnimateHover
+        onClick={() => {
+          navigate(routes.part2(userNamePart))
+        }}
+      >
+        Part Profile
+      </Button>
       <Button
         iconName={canEdit ? 'save' : 'fork'}
         className="ml-3 shadow-md hover:shadow-lg border-indigo-600 border-2 border-opacity-0 hover:border-opacity-100 bg-indigo-800 text-indigo-200"

web/src/components/Svg/Svg.js

@@ -1,5 +1,20 @@
 const Svg = ({ name, className: className2, strokeWidth = 2 }) => {
   const svgs = {
+    'arrow-left': (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={strokeWidth}
+          d="M10 19l-7-7m0 0l7-7m-7 7h18"
+        />
+      </svg>
+    ),
     'chevron-down': (
       <svg
         xmlns="http://www.w3.org/2000/svg"