feat: create project list (#671)

apps/client/src/features/app-settings/panel/Panel.module.scss

@@ -10,7 +10,11 @@
 
 .subheader {
   font-size: 1.25rem;
+  padding-bottom: 0.25rem;
   font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 
 .section {
@@ -35,3 +39,29 @@
   display: block;
   color: $error-red;
 }
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: calc(1rem - 2px);
+  text-align: left;
+
+  tr {
+    padding: 1rem 0;
+  }
+
+  th {
+    border-bottom: 1px solid $white-10;
+    font-weight: 400;
+    color: $gray-400;
+  }
+
+  th,
+  td {
+    padding: 0.5rem;
+  }
+
+  tr:nth-child(even) {
+    background-color: $white-1;
+  }
+}

apps/client/src/features/app-settings/panel/PanelUtils.tsx

@@ -11,7 +11,7 @@ export function SubHeader({ children }: { children: ReactNode }) {
 }
 
 export function Section({ children }: { children: ReactNode }) {
-  return <p className={style.section}>{children}</p>;
+  return <div className={style.section}>{children}</div>;
 }
 
 export function Paragraph({ children }: { children: ReactNode }) {
@@ -21,3 +21,7 @@ export function Paragraph({ children }: { children: ReactNode }) {
 export function Card({ children }: { children: ReactNode }) {
   return <div className={style.card}>{children}</div>;
 }
+
+export function Table({ children }: { children: ReactNode }) {
+  return <table className={style.table}>{children}</table>;
+}

apps/client/src/features/app-settings/panel/project-panel/ProjectList.tsx

@@ -0,0 +1,76 @@
+import { IconButton, Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/react';
+import { IoEllipsisHorizontal } from '@react-icons/all-files/io5/IoEllipsisHorizontal';
+
+import { useProjectList } from '../../../../common/hooks-query/useProjectList';
+import * as Panel from '../PanelUtils';
+
+import style from './ProjectPanel.module.scss';
+
+export default function ProjectList() {
+  const { data } = useProjectList();
+  const { files, lastLoadedProject } = data;
+
+  // extract currently loaded from file list
+  const currentlyLoadedIndex = files.findIndex((project) => project.filename === lastLoadedProject);
+  const projectFiles = [...files];
+  const current = projectFiles.splice(currentlyLoadedIndex, 1)[0];
+
+  return (
+    <Panel.Table>
+      <thead>
+        <tr>
+          <th>Project Name</th>
+          <th>Date Created</th>
+          <th>Date Modified</th>
+          <th />
+        </tr>
+      </thead>
+      <tbody>
+        {current && (
+          <tr className={style.current}>
+            <td>{current.filename}</td>
+            <td>{new Date(current.createdAt).toLocaleString()}</td>
+            <td>{new Date(current.updatedAt).toLocaleString()}</td>
+            <td className={style.actionButton}>
+              <ActionMenu />
+            </td>
+          </tr>
+        )}
+        {projectFiles.map((project) => {
+          const createdAt = new Date(project.createdAt).toLocaleString();
+          const updatedAt = new Date(project.updatedAt).toLocaleString();
+          return (
+            <tr key={project.filename}>
+              <td>{project.filename}</td>
+              <td>{createdAt}</td>
+              <td>{updatedAt}</td>
+              <td className={style.actionButton}>
+                <ActionMenu />
+              </td>
+            </tr>
+          );
+        })}
+      </tbody>
+    </Panel.Table>
+  );
+}
+
+function ActionMenu() {
+  return (
+    <Menu variant='ontime-on-dark' size='sm'>
+      <MenuButton
+        as={IconButton}
+        aria-label='Options'
+        icon={<IoEllipsisHorizontal />}
+        variant='ontime-ghosted'
+        size='sm'
+      />
+      <MenuList>
+        <MenuItem>Load</MenuItem>
+        <MenuItem>Rename</MenuItem>
+        <MenuItem>Duplicate</MenuItem>
+        <MenuItem>Delete</MenuItem>
+      </MenuList>
+    </Menu>
+  );
+}

apps/client/src/features/app-settings/panel/project-panel/ProjectPanel.module.scss

@@ -0,0 +1,10 @@
+@use '../../../../theme/ontimeColours' as *;
+
+.current {
+  color: $blue-400;
+  background-color: $gray-1350;
+}
+
+.actionButton {
+  text-align: right;
+}

apps/client/src/features/app-settings/panel/project-panel/ProjectPanel.tsx

@@ -0,0 +1,22 @@
+import { Button } from '@chakra-ui/react';
+
+import * as Panel from '../PanelUtils';
+
+import ProjectList from './ProjectList';
+
+export default function ProjectPanel() {
+  return (
+    <>
+      <Panel.Header>Project</Panel.Header>
+      <Panel.Section>
+        <Panel.Card>
+          <Panel.SubHeader>
+            Manage projects
+            <Button variant='ontime-filled'>New</Button>
+          </Panel.SubHeader>
+          <ProjectList />
+        </Panel.Card>
+      </Panel.Section>
+    </>
+  );
+}