Merge pull request #330 from calkit/new-project

Add new project button to top bar
calkit · Feb 8, 2025 · 0af1a6d · 0af1a6d
2 parents 7ed2b62 + c6fa27a
commit 0af1a6d
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 9 deletions.
diff --git a/frontend/src/components/Common/Topbar.tsx b/frontend/src/components/Common/Topbar.tsx
@@ -15,8 +15,9 @@ import {
 import { Link as RouterLink } from "@tanstack/react-router"
 import { HamburgerIcon, CloseIcon } from "@chakra-ui/icons"
 import UserMenu from "./UserMenu"
-import { FaGithub } from "react-icons/fa"
+import { FaGithub, FaPlus } from "react-icons/fa"
 import useAuth from "../../hooks/useAuth"
+import NewProject from "../Projects/NewProject"
 
 interface Props {
   children: React.ReactNode
@@ -53,6 +54,7 @@ export default function Topbar() {
   const { isOpen, onOpen, onClose } = useDisclosure()
   const secBgColor = useColorModeValue("ui.secondary", "ui.darkSlate")
   const { user } = useAuth()
+  const newProjectModal = useDisclosure()
 
   return (
     <>
@@ -93,6 +95,19 @@ export default function Topbar() {
             </HStack>
           </HStack>
           <Flex alignItems={"center"}>
+            <Button
+              aria-label="new-project"
+              size="sm"
+              mr={6}
+              onClick={newProjectModal.onOpen}
+            >
+              <Icon as={FaPlus} mr={1} />
+              New project
+            </Button>
+            <NewProject
+              onClose={newProjectModal.onClose}
+              isOpen={newProjectModal.isOpen}
+            />
             <Link
               isExternal
               href="https://github.com/calkit/calkit-cloud"

diff --git a/...src/components/Projects/CreateProject.tsx → ...nd/src/components/Projects/NewProject.tsx b/...src/components/Projects/CreateProject.tsx → ...nd/src/components/Projects/NewProject.tsx
@@ -30,13 +30,13 @@ import {
 import useCustomToast from "../../hooks/useCustomToast"
 import { handleError } from "../../utils"
 
-interface AddProjectProps {
+interface NewProjectProps {
   isOpen: boolean
   onClose: () => void
   defaultTemplate?: string
 }
 
-const AddProject = ({ isOpen, onClose, defaultTemplate }: AddProjectProps) => {
+const NewProject = ({ isOpen, onClose, defaultTemplate }: NewProjectProps) => {
   const templates = ["calkit/example-basic", "calkit/example-matlab"]
   if (!defaultTemplate) {
     defaultTemplate = "calkit/example-basic"
@@ -123,7 +123,7 @@ const AddProject = ({ isOpen, onClose, defaultTemplate }: AddProjectProps) => {
       >
         <ModalOverlay />
         <ModalContent as="form" onSubmit={handleSubmit(onSubmit)}>
-          <ModalHeader>Create project</ModalHeader>
+          <ModalHeader>New project</ModalHeader>
           <ModalCloseButton />
           <ModalBody pb={6}>
             <FormControl isRequired isInvalid={!!errors.title}>
@@ -205,4 +205,4 @@ const AddProject = ({ isOpen, onClose, defaultTemplate }: AddProjectProps) => {
   )
 }
 
-export default AddProject
+export default NewProject
diff --git a/frontend/src/routes/_layout/$userName/$projectName/_layout.tsx b/frontend/src/routes/_layout/$userName/$projectName/_layout.tsx
@@ -40,7 +40,7 @@ import Sidebar from "../../../../components/Common/Sidebar"
 import { ProjectPublic } from "../../../../client"
 import EditProject from "../../../../components/Projects/EditProject"
 import useProject from "../../../../hooks/useProject"
-import AddProject from "../../../../components/Projects/CreateProject"
+import NewProject from "../../../../components/Projects/NewProject"
 import useAuth from "../../../../hooks/useAuth"
 
 export const Route = createFileRoute("/_layout/$userName/$projectName/_layout")(
@@ -310,7 +310,7 @@ function ProjectMenu({ project, userHasWriteAccess }: ProjectMenuProps) {
         isOpen={editProjectModal.isOpen}
         onClose={editProjectModal.onClose}
       />
-      <AddProject
+      <NewProject
         isOpen={newProjectModal.isOpen}
         onClose={newProjectModal.onClose}
         defaultTemplate={`${project.owner_account_name}/${project.name}`}

diff --git a/frontend/src/routes/_layout/index.tsx b/frontend/src/routes/_layout/index.tsx
@@ -30,7 +30,7 @@ import { useDebounce } from "use-debounce"
 import { ProjectsService } from "../../client"
 import ActionsMenu from "../../components/Common/ActionsMenu"
 import Navbar from "../../components/Common/Navbar"
-import CreateProject from "../../components/Projects/CreateProject"
+import CreateProject from "../../components/Projects/NewProject"
 import { pageWidthNoSidebar } from "../../utils"
 import useAuth from "../../hooks/useAuth"
 
@@ -96,7 +96,7 @@ function ProjectsTable() {
     <>
       <Flex alignItems="center">
         <Box mr={4}>
-          <Navbar verb={"Create"} type={"project"} addModalAs={CreateProject} />
+          <Navbar verb={"New"} type={"project"} addModalAs={CreateProject} />
         </Box>
         <Input placeholder="Search..." width="33%" onChange={onSearchChange} />
       </Flex>