Home page touch-ups (#2135)

* Save part images when navigating home * Load part images in project cards if available * Polish home page * A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu) * Merge branch 'main' into franknoirot/project-images * Mostly restored link + form functionality * Working cards with images * Comment out project image stuff * Little style tweaks * Remove unused imports * More minor styling tweaks * Merge branch 'main' into franknoirot/project-images * Was using the wrong imported `Project` type * A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu) * Revert any docs changes * Revert wasm-lib divergences * Move ProjectCard into its component folder * Remove unused hook useSaveVideoFrame * Remove "hideOnLevel" config from theme setting --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
2024-05-23 11:47:02 -04:00
parent 5b7d707b26
commit 023ed1a687
11 changed files with 399 additions and 314 deletions
--- a/src/components/ProjectCard/ProjectCardRenameForm.tsx
+++ b/src/components/ProjectCard/ProjectCardRenameForm.tsx
@ -0,0 +1,67 @@
+import { ActionButton } from 'components/ActionButton'
+import Tooltip from 'components/Tooltip'
+import { HTMLProps, forwardRef } from 'react'
+import { Project } from 'wasm-lib/kcl/bindings/Project'
+
+interface ProjectCardRenameFormProps extends HTMLProps<HTMLFormElement> {
+  project: Project
+  onDismiss: () => void
+}
+
+export const ProjectCardRenameForm = forwardRef(
+  (
+    { project, onDismiss, ...props }: ProjectCardRenameFormProps,
+    ref: React.Ref<HTMLInputElement>
+  ) => {
+    return (
+      <form {...props}>
+        <input
+          className="min-w-0 dark:bg-chalkboard-80 dark:border-chalkboard-40 focus:outline-none"
+          type="text"
+          id="newProjectName"
+          onClickCapture={(e) => e.preventDefault()}
+          name="newProjectName"
+          required
+          autoCorrect="off"
+          autoCapitalize="off"
+          defaultValue={project.name}
+          ref={ref}
+          onKeyDown={(e) => {
+            if (e.key === 'Escape') {
+              onDismiss()
+            }
+          }}
+        />
+        <div className="flex items-center gap-1">
+          <ActionButton
+            Element="button"
+            type="submit"
+            iconStart={{
+              icon: 'checkmark',
+              bgClassName: '!bg-transparent',
+            }}
+            className="!p-0"
+          >
+            <Tooltip position="left" delay={1000}>
+              Rename project
+            </Tooltip>
+          </ActionButton>
+          <ActionButton
+            Element="button"
+            iconStart={{
+              icon: 'close',
+              iconClassName: 'dark:!text-chalkboard-20',
+              bgClassName: '!bg-transparent',
+            }}
+            className="!p-0"
+            onClick={onDismiss}
+          >
+            <Tooltip position="left" delay={1000}>
+              Cancel
+            </Tooltip>
+          </ActionButton>
+        </div>
+      </form>
+    )
+  }
+)