Use platform-agnostic file separators (#890)

* Use platform-agnostic path separators

* Fix file settings by fixing absolute file path

* Fix missing home link in AppHeader

* Found so many more instances of raw "/" characters

* Tiny Settings style fix

* Clean up onboarding behavior for XState and multi-file

src/Router.tsx

@@ -44,6 +44,7 @@ import * as Sentry from '@sentry/react'
 import ModelingMachineProvider from 'components/ModelingMachineProvider'
 import { KclContextProvider } from 'lang/KclSinglton'
 import FileMachineProvider from 'components/FileMachineProvider'
+import { sep } from '@tauri-apps/api/path'
 
 if (VITE_KC_SENTRY_DSN && !TEST) {
   Sentry.init({
@@ -145,10 +146,10 @@ const router = createBrowserRouter(
       path: paths.FILE + '/:id',
       element: (
         <Auth>
-          <Outlet />
           <FileMachineProvider>
             <KclContextProvider>
               <ModelingMachineProvider>
+                <Outlet />
                 <App />
               </ModelingMachineProvider>
               <WasmErrBanner />
@@ -187,23 +188,23 @@ const router = createBrowserRouter(
 
         if (params.id && params.id !== BROWSER_FILE_NAME) {
           const decodedId = decodeURIComponent(params.id)
-          const projectAndFile = decodedId.replace(defaultDir + '/', '')
+          const projectAndFile = decodedId.replace(defaultDir + sep, '')
-          const firstSlashIndex = projectAndFile.indexOf('/')
+          const firstSlashIndex = projectAndFile.indexOf(sep)
           const projectName = projectAndFile.slice(0, firstSlashIndex)
-          const projectPath = defaultDir + '/' + projectName
+          const projectPath = defaultDir + sep + projectName
           const currentFileName = projectAndFile.slice(firstSlashIndex + 1)
 
           if (firstSlashIndex === -1 || !currentFileName)
             return redirect(
               `${paths.FILE}/${encodeURIComponent(
-                `${params.id}/${PROJECT_ENTRYPOINT}`
+                `${params.id}${sep}${PROJECT_ENTRYPOINT}`
               )}`
             )
 
           // Note that PROJECT_ENTRYPOINT is hardcoded until we support multiple files
           const code = await readTextFile(decodedId)
           const entrypointMetadata = await metadata(
-            projectPath + '/' + PROJECT_ENTRYPOINT
+            projectPath + sep + PROJECT_ENTRYPOINT
           )
           const children = await readDir(projectPath, { recursive: true })
 
@@ -270,9 +271,9 @@ const router = createBrowserRouter(
           isProjectDirectory
         )
         const projects = await Promise.all(
-          projectsNoMeta.map(async (p) => ({
+          projectsNoMeta.map(async (p: FileEntry) => ({
             entrypointMetadata: await metadata(
-              p.path + '/' + PROJECT_ENTRYPOINT
+              p.path + sep + PROJECT_ENTRYPOINT
             ),
             ...p,
           }))

src/components/AppHeader.tsx

@@ -32,13 +32,11 @@ export const AppHeader = ({
         className
       }
     >
-      {project && (
+      <ProjectSidebarMenu
-        <ProjectSidebarMenu
+        renderAsLink={!enableMenu}
-          renderAsLink={!enableMenu}
+        project={project?.project}
-          project={project.project}
+        file={project?.file}
-          file={project.file}
+      />
-        />
-      )}
       {/* Toolbar if the context deems it */}
       {showToolbar && (
         <div className="max-w-lg md:max-w-xl lg:max-w-2xl xl:max-w-4xl 2xl:max-w-5xl">
@@ -47,7 +45,7 @@ export const AppHeader = ({
       )}
       {/* If there are children, show them, otherwise show User menu */}
       {children || (
-        <div className="ml-auto flex items-center gap-1">
+        <div className="flex items-center gap-1 ml-auto">
           <NetworkHealthIndicator />
           <UserSidebarMenu user={user} />
         </div>

src/components/FileMachineProvider.tsx

@@ -22,6 +22,7 @@ import {
 } from '@tauri-apps/api/fs'
 import { FILE_EXT, readProject } from 'lib/tauriFS'
 import { isTauri } from 'lib/isTauri'
+import { sep } from '@tauri-apps/api/path'
 
 type MachineContext<T extends AnyStateMachine> = {
   state: StateFrom<T>
@@ -56,7 +57,7 @@ export const FileMachineProvider = ({
           setCommandBarOpen(false)
           navigate(
             `${paths.FILE}/${encodeURIComponent(
-              context.selectedDirectory + '/' + event.data.name
+              context.selectedDirectory + sep + event.data.name
             )}`
           )
         }
@@ -82,11 +83,11 @@ export const FileMachineProvider = ({
         let name = event.data.name.trim() || DEFAULT_FILE_NAME
 
         if (event.data.makeDir) {
-          await createDir(context.selectedDirectory.path + '/' + name)
+          await createDir(context.selectedDirectory.path + sep + name)
         } else {
           await writeFile(
             context.selectedDirectory.path +
-              '/' +
+              sep +
               name +
               (name.endsWith(FILE_EXT) ? '' : FILE_EXT),
             ''
@@ -103,9 +104,9 @@ export const FileMachineProvider = ({
         let name = newName ? newName : DEFAULT_FILE_NAME
 
         await renameFile(
-          context.selectedDirectory.path + '/' + oldName,
+          context.selectedDirectory.path + sep + oldName,
           context.selectedDirectory.path +
-            '/' +
+            sep +
             name +
             (name.endsWith(FILE_EXT) || isDir ? '' : FILE_EXT)
         )

src/components/ProjectSidebarMenu.tsx

@@ -7,6 +7,7 @@ import { Link } from 'react-router-dom'
 import { ExportButton } from './ExportButton'
 import { Fragment } from 'react'
 import { FileTree } from './FileTree'
+import { sep } from '@tauri-apps/api/path'
 
 const ProjectSidebarMenu = ({
   project,
@@ -26,10 +27,10 @@ const ProjectSidebarMenu = ({
       <img
         src="/kitt-8bit-winking.svg"
         alt="KittyCAD App"
-        className="h-9 w-auto"
+        className="w-auto h-9"
       />
       <span
-        className="text-sm text-chalkboard-110 dark:text-chalkboard-20 whitespace-nowrap hidden lg:block"
+        className="hidden text-sm text-chalkboard-110 dark:text-chalkboard-20 whitespace-nowrap lg:block"
         data-testid="project-sidebar-link-name"
       >
         {project?.name ? project.name : 'KittyCAD Modeling App'}
@@ -44,16 +45,16 @@ const ProjectSidebarMenu = ({
         <img
           src="/kitt-8bit-winking.svg"
           alt="KittyCAD App"
-          className="h-full w-auto"
+          className="w-auto h-full"
         />
         <div className="flex flex-col items-start py-0.5">
-          <span className="text-sm text-chalkboard-110 dark:text-chalkboard-20 whitespace-nowrap hidden lg:block">
+          <span className="hidden text-sm text-chalkboard-110 dark:text-chalkboard-20 whitespace-nowrap lg:block">
             {isTauri() && file?.name
-              ? file.name.slice(file.name.lastIndexOf('/') + 1)
+              ? file.name.slice(file.name.lastIndexOf(sep) + 1)
               : 'KittyCAD Modeling App'}
           </span>
           {isTauri() && project?.name && (
-            <span className="text-xs text-chalkboard-70 dark:text-chalkboard-40 whitespace-nowrap hidden lg:block">
+            <span className="hidden text-xs text-chalkboard-70 dark:text-chalkboard-40 whitespace-nowrap lg:block">
               {project.name}
             </span>
           )}
@@ -68,7 +69,7 @@ const ProjectSidebarMenu = ({
         leaveTo="opacity-0"
         as={Fragment}
       >
-        <Popover.Overlay className="fixed z-20 inset-0 bg-chalkboard-110/50" />
+        <Popover.Overlay className="fixed inset-0 z-20 bg-chalkboard-110/50" />
       </Transition>
 
       <Transition
@@ -81,7 +82,7 @@ const ProjectSidebarMenu = ({
         as={Fragment}
       >
         <Popover.Panel
-          className="fixed inset-0 right-auto z-30 w-64 h-screen max-h-screen grid grid-cols-1 bg-chalkboard-10 dark:bg-chalkboard-100 border border-energy-100 dark:border-energy-100/50 shadow-md rounded-r-lg"
+          className="fixed inset-0 right-auto z-30 grid w-64 h-screen max-h-screen grid-cols-1 border rounded-r-lg shadow-md bg-chalkboard-10 dark:bg-chalkboard-100 border-energy-100 dark:border-energy-100/50"
           style={{ gridTemplateRows: 'auto 1fr auto' }}
         >
           {({ close }) => (
@@ -90,7 +91,7 @@ const ProjectSidebarMenu = ({
                 <img
                   src="/kitt-8bit-winking.svg"
                   alt="KittyCAD App"
-                  className="h-9 w-auto"
+                  className="w-auto h-9"
                 />
 
                 <div>
@@ -102,7 +103,7 @@ const ProjectSidebarMenu = ({
                   </p>
                   {project?.entrypointMetadata && (
                     <p
-                      className="m-0 text-chalkboard-100 dark:text-energy-40 text-xs"
+                      className="m-0 text-xs text-chalkboard-100 dark:text-energy-40"
                       data-testid="createdAt"
                     >
                       Created{' '}
@@ -120,7 +121,7 @@ const ProjectSidebarMenu = ({
               ) : (
                 <div className="flex-1 overflow-hidden" />
               )}
-              <div className="p-4 flex flex-col gap-2 bg-energy-10/25 dark:bg-energy-110">
+              <div className="flex flex-col gap-2 p-4 bg-energy-10/25 dark:bg-energy-110">
                 <ExportButton
                   className={{
                     button:

src/hooks/useAbsoluteFilePath.ts

@@ -7,6 +7,6 @@ export function useAbsoluteFilePath() {
   return (
     paths.FILE +
     '/' +
-    encodeURIComponent(routeData?.project?.path || BROWSER_FILE_NAME)
+    encodeURIComponent(routeData?.file?.path || BROWSER_FILE_NAME)
   )
 }

src/lib/tauriFS.ts

@@ -5,10 +5,11 @@ import {
   readDir,
   writeTextFile,
 } from '@tauri-apps/api/fs'
-import { documentDir, homeDir } from '@tauri-apps/api/path'
+import { documentDir, homeDir, sep } from '@tauri-apps/api/path'
 import { isTauri } from './isTauri'
 import { ProjectWithEntryPointMetadata } from '../Router'
 import { metadata } from 'tauri-plugin-fs-extra-api'
+import { bracket } from './exampleKcl'
 
 const PROJECT_FOLDER = 'kittycad-modeling-projects'
 export const FILE_EXT = '.kcl'
@@ -70,7 +71,7 @@ export async function getProjectsInDir(projectDir: string) {
 
   const projectsWithMetadata = await Promise.all(
     readProjects.map(async (p) => ({
-      entrypointMetadata: await metadata(p.path + '/' + PROJECT_ENTRYPOINT),
+      entrypointMetadata: await metadata(p.path + sep + PROJECT_ENTRYPOINT),
       ...p,
     }))
   )
@@ -224,7 +225,7 @@ export async function createNewProject(
     })
   }
 
-  await writeTextFile(path + '/' + PROJECT_ENTRYPOINT, '').catch((err) => {
+  await writeTextFile(path + sep + PROJECT_ENTRYPOINT, bracket).catch((err) => {
     console.error('Error creating new file:', err)
     throw err
   })
@@ -232,13 +233,13 @@ export async function createNewProject(
   const m = await metadata(path)
 
   return {
-    name: path.slice(path.lastIndexOf('/') + 1),
+    name: path.slice(path.lastIndexOf(sep) + 1),
     path: path,
     entrypointMetadata: m,
     children: [
       {
         name: PROJECT_ENTRYPOINT,
-        path: path + '/' + PROJECT_ENTRYPOINT,
+        path: path + sep + PROJECT_ENTRYPOINT,
         children: [],
       },
     ],

src/routes/Home.tsx

@@ -29,6 +29,7 @@ import useStateMachineCommands from '../hooks/useStateMachineCommands'
 import { useGlobalStateContext } from 'hooks/useGlobalStateContext'
 import { useCommandsContext } from 'hooks/useCommandsContext'
 import { DEFAULT_PROJECT_NAME } from 'machines/settingsMachine'
+import { sep } from '@tauri-apps/api/path'
 
 // This route only opens in the Tauri desktop context for now,
 // as defined in Router.tsx, so we can use the Tauri APIs and types.
@@ -58,7 +59,7 @@ const Home = () => {
           setCommandBarOpen(false)
           navigate(
             `${paths.FILE}/${encodeURIComponent(
-              context.defaultDirectory + '/' + event.data.name
+              context.defaultDirectory + sep + event.data.name
             )}`
           )
         }
@@ -91,7 +92,7 @@ const Home = () => {
           name = interpolateProjectNameWithIndex(name, nextIndex)
         }
 
-        await createNewProject(context.defaultDirectory + '/' + name)
+        await createNewProject(context.defaultDirectory + sep + name)
 
         if (shouldUpdateDefaultProjectName) {
           sendToSettings({
@@ -114,8 +115,8 @@ const Home = () => {
         }
 
         await renameFile(
-          context.defaultDirectory + '/' + oldName,
+          context.defaultDirectory + sep + oldName,
-          context.defaultDirectory + '/' + name
+          context.defaultDirectory + sep + name
         )
         return `Successfully renamed "${oldName}" to "${name}"`
       },
@@ -123,7 +124,7 @@ const Home = () => {
         context: ContextFrom<typeof homeMachine>,
         event: EventFrom<typeof homeMachine, 'Delete project'>
       ) => {
-        await removeDir(context.defaultDirectory + '/' + event.data.name, {
+        await removeDir(context.defaultDirectory + sep + event.data.name, {
           recursive: true,
         })
         return `Successfully deleted "${event.data.name}"`
@@ -172,9 +173,9 @@ const Home = () => {
   }
 
   return (
-    <div className="h-screen overflow-hidden relative flex flex-col">
+    <div className="relative flex flex-col h-screen overflow-hidden">
       <AppHeader showToolbar={false} />
-      <div className="my-24 px-4 lg:px-0 overflow-y-auto max-w-5xl w-full mx-auto">
+      <div className="w-full max-w-5xl px-4 mx-auto my-24 overflow-y-auto lg:px-0">
         <section className="flex justify-between">
           <h1 className="text-3xl text-bold">Your Projects</h1>
           <div className="flex">
@@ -235,7 +236,7 @@ const Home = () => {
           ) : (
             <>
               {projects.length > 0 ? (
-                <ul className="my-8 w-full grid grid-cols-4 gap-4">
+                <ul className="grid w-full grid-cols-4 gap-4 my-8">
                   {projects.sort(getSortFunction(sort)).map((project) => (
                     <ProjectCard
                       key={project.name}
@@ -246,7 +247,7 @@ const Home = () => {
                   ))}
                 </ul>
               ) : (
-                <p className="rounded my-8 border border-dashed border-chalkboard-30 dark:border-chalkboard-70 p-4">
+                <p className="p-4 my-8 border border-dashed rounded border-chalkboard-30 dark:border-chalkboard-70">
                   No Projects found, ready to make your first one?
                 </p>
               )}

src/routes/Onboarding/Export.tsx

@@ -24,8 +24,15 @@ export default function Export() {
             Try opening the project menu and clicking "Export Model".
           </p>
           <p className="my-4">
-            KittyCAD Modeling App uses our open-source extension proposal for
+            KittyCAD Modeling App uses{' '}
-            the GLTF file format.{' '}
+            <a
+              href="https://kittycad.io/gltf-format-extension"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              our open-source extension proposal
+            </a>{' '}
+            for the GLTF file format.{' '}
             <a
               href="https://kittycad.io/docs/api/convert-cad-file"
               rel="noopener noreferrer"

src/routes/Onboarding/FutureWork.tsx

@@ -4,13 +4,23 @@ import { useDismiss } from '.'
 import { useEffect } from 'react'
 import { bracket } from 'lib/exampleKcl'
 import { kclManager } from 'lang/KclSinglton'
+import { useModelingContext } from 'hooks/useModelingContext'
 
 export default function FutureWork() {
+  const { send } = useModelingContext()
   const dismiss = useDismiss()
 
   useEffect(() => {
-    kclManager.setCode(bracket)
+    if (kclManager.engineCommandManager.engineConnection?.isReady()) {
-  }, [kclManager.setCode])
+      // If the engine is ready, promptly execute the loaded code
+      kclManager.setCodeAndExecute(bracket)
+    } else {
+      // Otherwise, just set the code and wait for the connection to complete
+      kclManager.setCode(bracket)
+    }
+
+    send({ type: 'Cancel' }) // in case the user hit 'Next' while still in sketch mode
+  }, [send])
 
   return (
     <div className="fixed grid justify-center items-center inset-0 bg-chalkboard-100/50 z-50">

src/routes/Onboarding/Introduction.tsx

@@ -10,6 +10,7 @@ import { useGlobalStateContext } from 'hooks/useGlobalStateContext'
 import { Themes, getSystemTheme } from 'lib/theme'
 import { bracket } from 'lib/exampleKcl'
 import {
+  PROJECT_ENTRYPOINT,
   createNewProject,
   getNextProjectIndex,
   getProjectsInDir,
@@ -20,6 +21,7 @@ import { useNavigate } from 'react-router-dom'
 import { paths } from 'Router'
 import { useEffect } from 'react'
 import { kclManager } from 'lang/KclSinglton'
+import { sep } from '@tauri-apps/api/path'
 
 function OnboardingWithNewFile() {
   const navigate = useNavigate()
@@ -41,12 +43,16 @@ function OnboardingWithNewFile() {
       ONBOARDING_PROJECT_NAME,
       nextIndex
     )
-    const newFile = await createNewProject(defaultDirectory + '/' + name)
+    const newFile = await createNewProject(defaultDirectory + sep + name)
-    navigate(`${paths.FILE}/${encodeURIComponent(newFile.path)}`)
+    navigate(
+      `${paths.FILE}/${encodeURIComponent(
+        newFile.path + sep + PROJECT_ENTRYPOINT
+      )}${paths.ONBOARDING.INDEX}`
+    )
   }
   return (
-    <div className="fixed grid place-content-center inset-0 bg-chalkboard-110/50 z-50">
+    <div className="fixed inset-0 z-50 grid place-content-center bg-chalkboard-110/50">
-      <div className="max-w-3xl bg-chalkboard-10 dark:bg-chalkboard-90 p-8 rounded">
+      <div className="max-w-3xl p-8 rounded bg-chalkboard-10 dark:bg-chalkboard-90">
         {!isTauri() ? (
           <>
             <h1 className="text-2xl font-bold text-warn-80 dark:text-warn-10">
@@ -84,7 +90,7 @@ function OnboardingWithNewFile() {
           </>
         ) : (
           <>
-            <h1 className="text-2xl font-bold flex gap-4 flex-wrap items-center">
+            <h1 className="flex flex-wrap items-center gap-4 text-2xl font-bold">
               Would you like to create a new project?
             </h1>
             <section className="my-12">
@@ -110,7 +116,11 @@ function OnboardingWithNewFile() {
               </ActionButton>
               <ActionButton
                 Element="button"
-                onClick={createAndOpenNewProject}
+                onClick={() => {
+                  createAndOpenNewProject()
+                  kclManager.setCode(bracket)
+                  dismiss()
+                }}
                 icon={{ icon: faArrowRight }}
               >
                 Make a new project
@@ -138,21 +148,22 @@ export default function Introduction() {
       : ''
   const dismiss = useDismiss()
   const next = useNextClick(onboardingPaths.CAMERA)
+  const isStarterCode = kclManager.code === '' || kclManager.code === bracket
 
   useEffect(() => {
     if (kclManager.code === '') kclManager.setCode(bracket)
-  }, [kclManager.code, kclManager.setCode])
+  }, [])
 
-  return !(kclManager.code !== '' && kclManager.code !== bracket) ? (
+  return isStarterCode ? (
-    <div className="fixed grid place-content-center inset-0 bg-chalkboard-110/50 z-50">
+    <div className="fixed inset-0 z-50 grid place-content-center bg-chalkboard-110/50">
-      <div className="max-w-3xl bg-chalkboard-10 dark:bg-chalkboard-90 p-8 rounded">
+      <div className="max-w-3xl p-8 rounded bg-chalkboard-10 dark:bg-chalkboard-90">
-        <h1 className="text-2xl font-bold flex gap-4 flex-wrap items-center">
+        <h1 className="flex flex-wrap items-center gap-4 text-2xl font-bold">
           <img
             src={`/kcma-logomark${getLogoTheme()}.svg`}
             alt="KittyCAD Modeling App"
-            className="max-w-full h-20"
+            className="h-20 max-w-full"
           />
-          <span className="bg-energy-10 text-energy-80 px-3 py-1 rounded-full text-base">
+          <span className="px-3 py-1 text-base rounded-full bg-energy-10 text-energy-80">
             Alpha
           </span>
         </h1>

src/routes/Onboarding/Sketching.tsx

@@ -11,7 +11,13 @@ export default function Sketching() {
   const next = useNextClick(onboardingPaths.FUTURE_WORK)
 
   useEffect(() => {
-    kclManager.setCode('')
+    if (kclManager.engineCommandManager.engineConnection?.isReady()) {
+      // If the engine is ready, promptly execute the loaded code
+      kclManager.setCodeAndExecute('')
+    } else {
+      // Otherwise, just set the code and wait for the connection to complete
+      kclManager.setCode('')
+    }
   }, [])
 
   return (

src/routes/Settings.tsx

@@ -31,6 +31,7 @@ import {
   interpolateProjectNameWithIndex,
 } from 'lib/tauriFS'
 import { ONBOARDING_PROJECT_NAME } from './Onboarding'
+import { sep } from '@tauri-apps/api/path'
 
 export const Settings = () => {
   const loaderData =
@@ -95,7 +96,7 @@ export const Settings = () => {
       ONBOARDING_PROJECT_NAME,
       nextIndex
     )
-    const newFile = await createNewProject(defaultDirectory + '/' + name)
+    const newFile = await createNewProject(defaultDirectory + sep + name)
     navigate(`${paths.FILE}/${encodeURIComponent(newFile.path)}`)
   }
 
@@ -116,7 +117,7 @@ export const Settings = () => {
           Close
         </ActionButton>
       </AppHeader>
-      <div className="max-w-5xl mx-auto my-24">
+      <div className="max-w-5xl mx-5 lg:mx-auto my-24">
         <h1 className="text-4xl font-bold">User Settings</h1>
         <p className="max-w-2xl mt-6">
           Don't see the feature you want? Check to see if it's on{' '}