Franknoirot/multi file (#844)

* Fix unrelated bug, settings button in the home sidebar
doesn't go to the home settings after my previous fixes to routes

* Turn on "Replay Onboarding" button in home settings

* Add icons

* Add Tooltip component

* Rough-in of sidebar styling and add initial File Tree

* Polish basic styling

* Show nested files and directories

* Add tests

* use camelCase for entrypointMetadata

* Add ability to switch files via links

* Revert "Improve Prop Typings for Modals. Remove instances of `any`. (… (#813)

Revert "Improve Prop Typings for Modals. Remove instances of `any`. (#792)"

This reverts commit 629f326f4c.

* ffmpeg instructions (#814)

* Formatting

* Remove folder names from display in app header

* Highlight current file, open folders it's within

* Navigate on double click, delete on Cmd + Esc
+ highlight focused folders

* Migrate to an XState machine, add create new file

* Add ability to create folders (with naive names)
+ remove command bar stuff for now

* Use route loader data to instantiate the kcl code

* Clean up some unused things

* Add ability to rename files

* Add ability to rename folders

* Add keyboard shortcuts for creating files/folders

* Tooltip style tweaks

* Polish + re-execute when switching files with a connection

* Reset code before navigating via file tree

* Don't invoke `readProject` if you're in a browser

* Show files and folders for projects on home page

* Don't highlight folders further down the file tree

* @jgomez720 and @jessfraz feedback:
+ indentation markers
+ proper file icon
+ bump down font size
+ touch up colors

* Tune down spacing, allow scroll overflow

* Fix formatting

* Update src/lib/tauriFS.ts

* Add a confirmation dialog when deleting

Signed-off-by: Frank Noirot <frank@kittycad.io>

---------

Signed-off-by: Frank Noirot <frank@kittycad.io>
Co-authored-by: Kurt Hutten <k.hutten@protonmail.ch>

src/components/ProjectCard.tsx

@@ -1,4 +1,4 @@
-import { FormEvent, useState } from 'react'
+import { FormEvent, useEffect, useState } from 'react'
 import { type ProjectWithEntryPointMetadata, paths } from '../Router'
 import { Link } from 'react-router-dom'
 import { ActionButton } from './ActionButton'
@@ -8,7 +8,7 @@ import {
   faTrashAlt,
   faX,
 } from '@fortawesome/free-solid-svg-icons'
-import { FILE_EXT } from '../lib/tauriFS'
+import { FILE_EXT, getPartsCount, readProject } from '../lib/tauriFS'
 import { Dialog } from '@headlessui/react'
 import { useHotkeys } from 'react-hotkeys-hook'
 
@@ -28,6 +28,8 @@ function ProjectCard({
   useHotkeys('esc', () => setIsEditing(false))
   const [isEditing, setIsEditing] = useState(false)
   const [isConfirmingDelete, setIsConfirmingDelete] = useState(false)
+  const [numberOfParts, setNumberOfParts] = useState(1)
+  const [numberOfFolders, setNumberOfFolders] = useState(0)
 
   function handleSave(e: FormEvent<HTMLFormElement>) {
     e.preventDefault()
@@ -42,6 +44,17 @@ function ProjectCard({
       : date.toLocaleTimeString()
   }
 
+  useEffect(() => {
+    async function getNumberOfParts() {
+      const { kclFileCount, kclDirCount } = getPartsCount(
+        await readProject(project.path)
+      )
+      setNumberOfParts(kclFileCount)
+      setNumberOfFolders(kclDirCount)
+    }
+    getNumberOfParts()
+  }, [project.path])
+
   return (
     <li
       {...props}
@@ -76,7 +89,7 @@ function ProjectCard({
         </form>
       ) : (
         <>
-          <div className="p-1 flex flex-col gap-2">
+          <div className="p-1 flex flex-col h-full gap-2">
             <Link
               to={`${paths.FILE}/${encodeURIComponent(project.path)}`}
               className="flex-1 text-liquid-100"
@@ -84,7 +97,14 @@ function ProjectCard({
               {project.name?.replace(FILE_EXT, '')}
             </Link>
             <span className="text-chalkboard-60 text-xs">
-              Edited {getDisplayedTime(project.entrypoint_metadata.modifiedAt)}
+              {numberOfParts} part{numberOfParts === 1 ? '' : 's'}{' '}
+              {numberOfFolders > 0 &&
+                `/ ${numberOfFolders} folder${
+                  numberOfFolders === 1 ? '' : 's'
+                }`}
+            </span>
+            <span className="text-chalkboard-60 text-xs">
+              Edited {getDisplayedTime(project.entrypointMetadata.modifiedAt)}
             </span>
             <div className="absolute bottom-2 right-2 flex gap-1 items-center opacity-0 group-hover:opacity-100 group-focus-within:opacity-100">
               <ActionButton