Home page in desktop, separate file support (#252)

* Bugfix: don't toast on every change of defaultDir

* Refactor app to live under /file/:id

* Stub out Tauri-only home page

* home reads and writes blank files to defaultDir

* Fix initial directory creation

* Make file names editable

* Refactor onboarding to use normal fns for load issues

* Feature: load and write files to and from disk

* Feature: Add file deletion, break out FileCard component

* Fix settings close URLs to be relative, button types

* Add filename and link to AppHeader

* Style tweaks: scrollbar, header name, card size

* Style: add header, empty state to Home

* Refactor: load file in route loader

* Move makePathRelative to lib to fix tests

* Fix App test

* Use '$nnn' default name scheme

* Fix type error on ActionButton

* Fix type error on ActionButton

* @adamchalmers review

* Fix merge mistake

* Refactor: rename all things "file" to "project"

* Feature: migrate to <project-name>/main.kcl setup

* Fix tsc test

* @Irev-Dev review part 1: renames and imports

* @Irev-Dev review pt 2: simplify file list refresh

* @Irev-Dev review pt 3: filter out non-projects

* @Irev-review pt 4: folder conventions + home auth

* Add sort functionality to new welcome page (#255)

* Add todo for Sentry

src/App.tsx

@@ -43,8 +43,16 @@ import { useHotkeys } from 'react-hotkeys-hook'
 import { TEST } from './env'
 import { getNormalisedCoordinates } from './lib/utils'
 import { getSystemTheme } from './lib/getSystemTheme'
+import { isTauri } from './lib/isTauri'
+import { useLoaderData, useParams } from 'react-router-dom'
+import { writeTextFile } from '@tauri-apps/api/fs'
+import { FILE_EXT, PROJECT_ENTRYPOINT } from './lib/tauriFS'
+import { IndexLoaderData } from './Router'
+import { toast } from 'react-hot-toast'
 
 export function App() {
+  const { code: loadedCode } = useLoaderData() as IndexLoaderData
+  const pathParams = useParams()
   const streamRef = useRef<HTMLDivElement>(null)
   useHotKeyListener()
   const {
@@ -151,9 +159,34 @@ export function App() {
       ? 'opacity-40'
       : ''
 
+  // Use file code loaded from disk
+  // on mount, and overwrite any locally-stored code
+  useEffect(() => {
+    if (isTauri() && loadedCode !== null) {
+      setCode(loadedCode)
+    }
+    return () => {
+      // Clear code on unmount if in desktop app
+      if (isTauri()) {
+        setCode('')
+      }
+    }
+  }, [loadedCode, setCode])
+
   // const onChange = React.useCallback((value: string, viewUpdate: ViewUpdate) => {
   const onChange = (value: string, viewUpdate: ViewUpdate) => {
     setCode(value)
+    if (isTauri() && pathParams.id) {
+      // Save the file to disk
+      // Note that PROJECT_ENTRYPOINT is hardcoded until we support multiple files
+      writeTextFile(pathParams.id + '/' + PROJECT_ENTRYPOINT, value).catch(
+        (err) => {
+          // TODO: add Sentry per GH issue #254 (https://github.com/KittyCAD/modeling-app/issues/254)
+          console.error('error saving file', err)
+          toast.error('Error saving file, please check file permissions')
+        }
+      )
+    }
     if (editorView) {
       editorView?.dispatch({ effects: addLineHighlight.of([0, 0]) })
     }
@@ -413,6 +446,11 @@ export function App() {
           paneOpacity +
           (isMouseDownInStream ? ' pointer-events-none' : '')
         }
+        filename={
+          pathParams.id
+            ?.slice(pathParams.id.lastIndexOf('/') + 1)
+            .replace(FILE_EXT, '') || ''
+        }
       />
       <ModalContainer />
       <Resizable