Sync-up PR

.gitignore

@@ -11,6 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
+package-lock.json
 
 # Editor directories and files
 .vscode/*
@@ -22,3 +23,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.env
+/src/pages/test.jsx

README.md

@@ -1,13 +1 @@
-# React + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
-# Frontend
+# ArchAIve Frontend

package.json

@@ -23,6 +23,7 @@
     "redux": "^5.0.1"
   },
   "devDependencies": {
+    "@chakra-ui/cli": "^3.21.1",
     "@eslint/js": "^9.25.0",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",

src/Layout.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react'
 import { useDispatch } from 'react-redux'
 import { Outlet, useNavigate } from 'react-router';
-import "./core.css";
+import Navbar from './components/Navbar';
 
 function Layout() {
     const dispatch = useDispatch();
@@ -13,6 +13,7 @@ function Layout() {
 
     return (
         <div className='defaultLayout'>
+            <Navbar />
             <Outlet />
         </div>
     )

src/components/Navbar.jsx

@@ -0,0 +1,28 @@
+import React, { useState } from 'react'
+import Sidebar from './Sidebar'
+import { Avatar, Box, Button, Flex, HStack, Icon, Spacer, Text } from '@chakra-ui/react'
+import { FaHamburger } from 'react-icons/fa'
+import { FaBarsStaggered } from 'react-icons/fa6'
+
+function Navbar() {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const toggleSidebar = () => {
+        setIsOpen(!isOpen);
+    }
+
+    return <>
+        <Flex as={'nav'} width={'100%'} p={'10px'} paddingLeft={'20px'} paddingRight={'20px'} borderRadius={'20px'} alignItems={'center'} flexDir={'row'} bgGradient="to-r" gradientFrom="rgb(18, 20, 76)" gradientTo="rgb(0, 124, 122)">
+            <Icon as={FaBarsStaggered} boxSize={6} color={'white'} onClick={toggleSidebar} cursor={'pointer'} />
+            <Spacer />
+            <Text fontSize={'2xl'} fontWeight={'bolder'} color={'white'} fontFamily={'Pixelify Sans'}>ArchAIve</Text>
+            <Spacer />
+            <Avatar.Root>
+                <Avatar.Fallback name='John Appleseed' />
+            </Avatar.Root>
+        </Flex>
+        <Sidebar isOpen={isOpen} onOpenChange={(e) => setIsOpen(e.open)} />
+    </>
+}
+
+export default Navbar

src/components/Sidebar.jsx

@@ -0,0 +1,34 @@
+import { Button, CloseButton, Drawer, Portal, Text } from '@chakra-ui/react'
+import React, { useState } from 'react'
+
+function Sidebar({ isOpen, onOpenChange }) {
+    return (
+        <Drawer.Root open={isOpen} onOpenChange={onOpenChange} placement={'start'} size={'sm'}>
+            <Portal>
+                <Drawer.Backdrop />
+                <Drawer.Positioner padding={{ base: undefined, md: "4" }}>
+                    <Drawer.Content rounded="md">
+                        <Drawer.Header>
+                            <Drawer.Title>Drawer Title</Drawer.Title>
+                        </Drawer.Header>
+                        <Drawer.Body>
+                            <p>
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+                                eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                            </p>
+                        </Drawer.Body>
+                        <Drawer.Footer>
+                            <Button variant="outline">Cancel</Button>
+                            <Button>Save</Button>
+                        </Drawer.Footer>
+                        <Drawer.CloseTrigger asChild>
+                            <CloseButton size="sm" />
+                        </Drawer.CloseTrigger>
+                    </Drawer.Content>
+                </Drawer.Positioner>
+            </Portal>
+        </Drawer.Root>
+    )
+}
+
+export default Sidebar

src/components/ui/accordion.jsx

@@ -0,0 +1,39 @@
+import { Accordion, HStack } from '@chakra-ui/react'
+import * as React from 'react'
+import { LuChevronDown } from 'react-icons/lu'
+
+export const AccordionItemTrigger = React.forwardRef(
+  function AccordionItemTrigger(props, ref) {
+    const { children, indicatorPlacement = 'end', ...rest } = props
+    return (
+      <Accordion.ItemTrigger {...rest} ref={ref}>
+        {indicatorPlacement === 'start' && (
+          <Accordion.ItemIndicator rotate={{ base: '-90deg', _open: '0deg' }}>
+            <LuChevronDown />
+          </Accordion.ItemIndicator>
+        )}
+        <HStack gap='4' flex='1' textAlign='start' width='full'>
+          {children}
+        </HStack>
+        {indicatorPlacement === 'end' && (
+          <Accordion.ItemIndicator>
+            <LuChevronDown />
+          </Accordion.ItemIndicator>
+        )}
+      </Accordion.ItemTrigger>
+    )
+  },
+)
+
+export const AccordionItemContent = React.forwardRef(
+  function AccordionItemContent(props, ref) {
+    return (
+      <Accordion.ItemContent>
+        <Accordion.ItemBody {...props} ref={ref} />
+      </Accordion.ItemContent>
+    )
+  },
+)
+
+export const AccordionRoot = Accordion.Root
+export const AccordionItem = Accordion.Item

src/components/ui/action-bar.jsx

@@ -0,0 +1,33 @@
+import { ActionBar, Portal } from '@chakra-ui/react'
+import { CloseButton } from './close-button'
+import * as React from 'react'
+
+export const ActionBarContent = React.forwardRef(
+  function ActionBarContent(props, ref) {
+    const { children, portalled = true, portalRef, ...rest } = props
+
+    return (
+      <Portal disabled={!portalled} container={portalRef}>
+        <ActionBar.Positioner>
+          <ActionBar.Content ref={ref} {...rest} asChild={false}>
+            {children}
+          </ActionBar.Content>
+        </ActionBar.Positioner>
+      </Portal>
+    )
+  },
+)
+
+export const ActionBarCloseTrigger = React.forwardRef(
+  function ActionBarCloseTrigger(props, ref) {
+    return (
+      <ActionBar.CloseTrigger {...props} asChild ref={ref}>
+        <CloseButton size='sm' />
+      </ActionBar.CloseTrigger>
+    )
+  },
+)
+
+export const ActionBarRoot = ActionBar.Root
+export const ActionBarSelectionTrigger = ActionBar.SelectionTrigger
+export const ActionBarSeparator = ActionBar.Separator

src/components/ui/alert.jsx

@@ -0,0 +1,20 @@
+import { Alert as ChakraAlert } from '@chakra-ui/react'
+import * as React from 'react'
+
+export const Alert = React.forwardRef(function Alert(props, ref) {
+  const { title, children, icon, startElement, endElement, ...rest } = props
+  return (
+    <ChakraAlert.Root ref={ref} {...rest}>
+      {startElement || <ChakraAlert.Indicator>{icon}</ChakraAlert.Indicator>}
+      {children ? (
+        <ChakraAlert.Content>
+          <ChakraAlert.Title>{title}</ChakraAlert.Title>
+          <ChakraAlert.Description>{children}</ChakraAlert.Description>
+        </ChakraAlert.Content>
+      ) : (
+        <ChakraAlert.Title flex='1'>{title}</ChakraAlert.Title>
+      )}
+      {endElement}
+    </ChakraAlert.Root>
+  )
+})

src/components/ui/avatar.jsx

@@ -0,0 +1,21 @@
+import {
+  Avatar as ChakraAvatar,
+  AvatarGroup as ChakraAvatarGroup,
+} from '@chakra-ui/react'
+import * as React from 'react'
+
+export const Avatar = React.forwardRef(function Avatar(props, ref) {
+  const { name, src, srcSet, loading, icon, fallback, children, ...rest } =
+    props
+  return (
+    <ChakraAvatar.Root ref={ref} {...rest}>
+      <ChakraAvatar.Fallback name={name}>
+        {icon || fallback}
+      </ChakraAvatar.Fallback>
+      <ChakraAvatar.Image src={src} srcSet={srcSet} loading={loading} />
+      {children}
+    </ChakraAvatar.Root>
+  )
+})
+
+export const AvatarGroup = ChakraAvatarGroup

src/components/ui/blockquote.jsx

@@ -0,0 +1,22 @@
+import { Blockquote as ChakraBlockquote } from '@chakra-ui/react'
+import * as React from 'react'
+
+export const Blockquote = React.forwardRef(function Blockquote(props, ref) {
+  const { children, cite, citeUrl, showDash, icon, ...rest } = props
+
+  return (
+    <ChakraBlockquote.Root ref={ref} {...rest}>
+      {icon}
+      <ChakraBlockquote.Content cite={citeUrl}>
+        {children}
+      </ChakraBlockquote.Content>
+      {cite && (
+        <ChakraBlockquote.Caption>
+          {showDash ? <>&mdash;</> : null} <cite>{cite}</cite>
+        </ChakraBlockquote.Caption>
+      )}
+    </ChakraBlockquote.Root>
+  )
+})
+
+export const BlockquoteIcon = ChakraBlockquote.Icon

src/components/ui/breadcrumb.jsx

@@ -0,0 +1,34 @@
+import { Breadcrumb } from '@chakra-ui/react'
+import * as React from 'react'
+
+export const BreadcrumbRoot = React.forwardRef(
+  function BreadcrumbRoot(props, ref) {
+    const { separator, separatorGap, children, ...rest } = props
+
+    const validChildren = React.Children.toArray(children).filter(
+      React.isValidElement,
+    )
+
+    return (
+      <Breadcrumb.Root ref={ref} {...rest}>
+        <Breadcrumb.List gap={separatorGap}>
+          {validChildren.map((child, index) => {
+            const last = index === validChildren.length - 1
+            return (
+              <React.Fragment key={index}>
+                <Breadcrumb.Item>{child}</Breadcrumb.Item>
+                {!last && (
+                  <Breadcrumb.Separator>{separator}</Breadcrumb.Separator>
+                )}
+              </React.Fragment>
+            )
+          })}
+        </Breadcrumb.List>
+      </Breadcrumb.Root>
+    )
+  },
+)
+
+export const BreadcrumbLink = Breadcrumb.Link
+export const BreadcrumbCurrentLink = Breadcrumb.CurrentLink
+export const BreadcrumbEllipsis = Breadcrumb.Ellipsis

src/components/ui/checkbox-card.jsx

@@ -0,0 +1,45 @@
+import { CheckboxCard as ChakraCheckboxCard } from '@chakra-ui/react'
+import * as React from 'react'
+
+export const CheckboxCard = React.forwardRef(function CheckboxCard(props, ref) {
+  const {
+    inputProps,
+    label,
+    description,
+    icon,
+    addon,
+    indicator = <ChakraCheckboxCard.Indicator />,
+    indicatorPlacement = 'end',
+    ...rest
+  } = props
+
+  const hasContent = label || description || icon
+  const ContentWrapper = indicator ? ChakraCheckboxCard.Content : React.Fragment
+
+  return (
+    <ChakraCheckboxCard.Root {...rest}>
+      <ChakraCheckboxCard.HiddenInput ref={ref} {...inputProps} />
+      <ChakraCheckboxCard.Control>
+        {indicatorPlacement === 'start' && indicator}
+        {hasContent && (
+          <ContentWrapper>
+            {icon}
+            {label && (
+              <ChakraCheckboxCard.Label>{label}</ChakraCheckboxCard.Label>
+            )}
+            {description && (
+              <ChakraCheckboxCard.Description>
+                {description}
+              </ChakraCheckboxCard.Description>
+            )}
+            {indicatorPlacement === 'inside' && indicator}
+          </ContentWrapper>
+        )}
+        {indicatorPlacement === 'end' && indicator}
+      </ChakraCheckboxCard.Control>
+      {addon && <ChakraCheckboxCard.Addon>{addon}</ChakraCheckboxCard.Addon>}
+    </ChakraCheckboxCard.Root>
+  )
+})
+
+export const CheckboxCardIndicator = ChakraCheckboxCard.Indicator

src/components/ui/checkbox.jsx

@@ -0,0 +1,17 @@
+import { Checkbox as ChakraCheckbox } from '@chakra-ui/react'
+import * as React from 'react'
+
+export const Checkbox = React.forwardRef(function Checkbox(props, ref) {
+  const { icon, children, inputProps, rootRef, ...rest } = props
+  return (
+    <ChakraCheckbox.Root ref={rootRef} {...rest}>
+      <ChakraCheckbox.HiddenInput ref={ref} {...inputProps} />
+      <ChakraCheckbox.Control>
+        {icon || <ChakraCheckbox.Indicator />}
+      </ChakraCheckbox.Control>
+      {children != null && (
+        <ChakraCheckbox.Label>{children}</ChakraCheckbox.Label>
+      )}
+    </ChakraCheckbox.Root>
+  )
+})