wip new table shizzle

Author: cowboybeer

cms/App.tsx

@@ -5,8 +5,8 @@ import based from '@based/client'
 import basedConfig from '../based.json'
 import { useRoute } from 'kabouter'
 import { styled } from 'inlines'
-import { Modal } from '@based/ui'
-import { Content } from './_Content'
+import { Modal, ScrollArea } from '@based/ui'
+import { Content } from './Components/Content'
 // import { FileLibrary } from './Files'
 import { Menu } from './Components/SideBar'
 import { SchemaBuilder } from './Components/Schema'
@@ -39,14 +39,7 @@ export const App = () => {
   return !authState.userId ? (
     <Login />
   ) : (
-    <styled.div
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        minHeight: '100vh',
-        backgroundColor: color('background', 'screen'),
-      }}
-    >
+    <styled.div>
       <TopBar
         data={data}
         client={client}
@@ -61,21 +54,20 @@ export const App = () => {
             <>files</>
           ) : section === 'schema-builder' ? (
             <SchemaBuilder />
-          ) : (
-            // ) : section === 'profile' ? (
-            //   <Profile />
-            // ) : section === 'user-management' ? (
-            //   <Management />
-            // ) : section === 'db-settings' ? (
-            //   <DatabaseSettings />
-            // ) : section === 'general-settings' ? (
-            //   <GeneralSettings languages={schema?.languages} />
-            // ) : section === 'docs' ? (
-            //   <Docs />
-            // ) : !section ? (
+          ) : // ) : section === 'profile' ? (
+          //   <Profile />
+          // ) : section === 'user-management' ? (
+          //   <Management />
+          // ) : section === 'db-settings' ? (
+          //   <DatabaseSettings />
+          // ) : section === 'general-settings' ? (
+          //   <GeneralSettings languages={schema?.languages} />
+          // ) : section === 'docs' ? (
+          //   <Docs />
+          !section ? (
             <Dashboard />
-            // ) : (
-            //   <Content selectedLang={selectedLang || schema?.languages[0]} />
+          ) : (
+            <Content selectedLang={selectedLang || schema?.languages[0]} />
           )}
         </div>
       </styled.div>

cms/Components/Content/index.tsx

@@ -1,5 +1,125 @@
 import React from 'react'
+import {
+  Table,
+  Dropdown,
+  Modal,
+  useInfiniteQuery,
+  Button,
+  IconMoreVertical,
+  IconCopy,
+  IconPlus,
+  IconDelete,
+  Page,
+  Stack,
+  Text,
+} from '@based/ui'
+import { useRoute } from 'kabouter'
+import { useClient } from '@based/react'
 
-export const Content = () => {
-  return <>content viewer table</>
+export const Content = ({ selectedLang }) => {
+  const route = useRoute('[section][id]')
+  const routeSection = route.query.section
+
+  const client = useClient()
+
+  const [itemToDelete, setItemToDelete] = React.useState(null)
+  const { data, fetchMore, setVisibleElements } = useInfiniteQuery({
+    accessFn: (data) => data.files,
+    queryFn: (offset) => ({
+      $id: 'root',
+      files: {
+        $all: true,
+        $list: {
+          $sort: { $field: 'updatedAt', $order: 'desc' },
+          $offset: offset,
+          $limit: 25,
+          $find: {
+            $traverse: 'children',
+            $filter: {
+              $operator: '=',
+              $field: 'type',
+              $value: routeSection,
+            },
+          },
+        },
+      },
+    }),
+  })
+
+  console.log(data, 'NANI??', selectedLang)
+
+  return (
+    <Page>
+      <Stack style={{ marginBottom: 24 }}>
+        <Text variant="title-page">{routeSection as string}</Text>
+        <Button
+          prefix={<IconPlus />}
+          size="small"
+          variant="primary-transparent"
+          onClick={async () => {
+            await client.call('db:set', {
+              // TODO check this ? en default?
+              $language: selectedLang,
+              type: routeSection,
+            })
+          }}
+        >
+          Add new {routeSection as string}
+        </Button>
+      </Stack>
+
+      <Table
+        data={data}
+        onScrollToBottom={fetchMore}
+        onVisibleElementsChange={setVisibleElements}
+        rowAction={(row) => (
+          <Dropdown.Root>
+            <Dropdown.Trigger>
+              <Button shape="square" variant="neutral-transparent">
+                <IconMoreVertical />
+              </Button>
+            </Dropdown.Trigger>
+            <Dropdown.Items>
+              <Dropdown.Item icon={<IconCopy />}>Copy</Dropdown.Item>
+              <Dropdown.Item
+                icon={<IconDelete />}
+                onClick={() => {
+                  setItemToDelete(row.id)
+                }}
+              >
+                Delete
+              </Dropdown.Item>
+            </Dropdown.Items>
+          </Dropdown.Root>
+        )}
+      />
+
+      {itemToDelete && (
+        <Modal.Root
+          open
+          onOpenChange={() => {
+            setItemToDelete(null)
+          }}
+        >
+          <Modal.Overlay>
+            {({ close }) => (
+              <>
+                <Modal.Title description="Are you sure? This action cannot be undone.">
+                  Deleting item #{itemToDelete}
+                </Modal.Title>
+                <Modal.Actions>
+                  <Button onClick={close} variant="neutral">
+                    Cancel
+                  </Button>
+                  <Button onClick={close} variant="error">
+                    Delete
+                  </Button>
+                </Modal.Actions>
+              </>
+            )}
+          </Modal.Overlay>
+        </Modal.Root>
+      )}
+    </Page>
+  )
 }