Add "Collections" panel to the dashboard

packages/octent/src/components/ui/table.tsx

@@ -0,0 +1,114 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn("bg-primary font-medium text-primary-foreground", className)}
+    {...props}
+  />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    {...props}
+  />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

packages/octent/src/pages/dashboard/dashboard-page.tsx

@@ -8,8 +8,16 @@ import { Dialog, DialogContent, DialogTrigger } from '@/components/ui/dialog'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { Separator } from '@/components/ui/separator'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
 import { OctentOptionsContext } from '@/contexts/octent-options-context'
-import type { Content, Collection } from '@/lib/utils/content-explorer'
+import type { Collection, Content, Field } from '@/lib/utils/content-explorer'
 import { ContentExplorer } from '@/lib/utils/content-explorer'
 import { useContentStatus } from '@/hooks/use-content-status'
 import { Button } from '@/components/ui/button'
@@ -26,6 +34,7 @@ export function DashboardPage() {
 
   const [contents, setContents] = useState<FSContent[] | null>(null)
   const [directories, setDirectories] = useState<FSDirectory[] | null>(null)
+  const [collections, setCollections] = useState<string[] | null>(null)
 
   const auth = useAuth()
 
@@ -50,6 +59,7 @@ export function DashboardPage() {
   const updateContents = useCallback(async () => {
     setContents(await contentExplorer.listContentsInPath(currentPath))
     setDirectories(await contentExplorer.listDirectoriesInPath(currentPath))
+    setCollections(await contentExplorer.listCollections())
   }, [contentExplorer, currentPath])
 
   useEffect(function () {
@@ -113,6 +123,23 @@ export function DashboardPage() {
             ))}
           </ul>
         </main>
+        <aside className="w-64 ml-24">
+          <header className="mb-8">
+            <h2>Collections</h2>
+          </header>
+          {
+            collections?.length === 0 && <Label>No collections found.</Label>
+          }
+          <ul>
+            {collections?.map(collection => (
+              <DashboardItem
+                key={collection}
+                name={collection}
+                dialog={<CollectionDialog collection={collection} contentExplorer={contentExplorer} />}
+              />
+            ))}
+          </ul>
+        </aside>
       </div>
     </div>
   )
@@ -165,6 +192,40 @@ function DashboardItem({
   )
 }
 
+function CollectionDialog({ collection, contentExplorer }: { collection: string; contentExplorer: ContentExplorer }) {
+  const [collectionFields, setCollectionFields] = useState<Field[] | null>(null)
+
+  useEffect(() => {
+    contentExplorer.getCollection(collection).then(({ fields }) => {
+      setCollectionFields(fields)
+    })
+  }, [collection, contentExplorer])
+
+  return (
+    <div className="py-4">
+      <h3 className="mb-4">Fields</h3>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Field</TableHead>
+            <TableHead>Type</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {
+            collectionFields?.map(field => (
+              <TableRow key={field.name}>
+                <TableCell>{field.name}</TableCell>
+                <TableCell>{field.type}</TableCell>
+              </TableRow>
+            ))
+          }
+        </TableBody>
+      </Table>
+    </div>
+  )
+}
+
 function ContentDialog({ contentPath, contentExplorer }: { contentPath: string; contentExplorer: ContentExplorer }) {
   const [content, setContent] = useState<Content<Collection> | null>(null)
   const updateContentStatus = useContentStatus((state) => state.updateStatus)