axiodb 22.2.2 → 22.4.2

package/electron/src/components/collection/DeleteCollectionModal.jsx

@@ -0,0 +1,85 @@
+import apiClient from '../../api/client'
+import { useState } from 'react'
+import Modal from '../ui/Modal'
+import Button from '../ui/Button'
+import { Alert } from '../ui/Feedback'
+
+const DeleteCollectionModal = ({
+  isOpen,
+  onClose,
+  onCollectionDeleted,
+  databaseName,
+  collectionName
+}) => {
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [error, setError] = useState('')
+
+  // Reset form state when modal is opened/closed
+  const handleClose = () => {
+    setError('')
+    setIsSubmitting(false)
+    onClose()
+  }
+
+  const handleDelete = async () => {
+    setIsSubmitting(true)
+    setError('')
+
+    try {
+      const response = await apiClient.delete(
+        `/api/collection/delete-collection/?dbName=${encodeURIComponent(databaseName)}&collectionName=${encodeURIComponent(collectionName)}`
+      )
+
+      if (response.data.statusCode === 200) {
+        onCollectionDeleted(collectionName)
+        handleClose()
+      } else {
+        throw new Error('Failed to delete collection')
+      }
+    } catch (error) {
+      console.error('Error deleting collection:', error)
+      setError(
+        error.response?.data?.message ||
+          'Failed to delete collection. Please try again.'
+      )
+      setIsSubmitting(false)
+    }
+  }
+
+  const WarningIcon = (
+    <svg className='h-5 w-5' fill='none' viewBox='0 0 24 24' stroke='currentColor' strokeWidth={2}>
+      <path strokeLinecap='round' strokeLinejoin='round' d='M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z' />
+    </svg>
+  )
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={handleClose}
+      title='Delete collection'
+      subtitle={`${databaseName} \u203a ${collectionName}`}
+      icon={WarningIcon}
+      tone='danger'
+      size='md'
+      footer={
+        <>
+          <Button variant='secondary' onClick={handleClose} disabled={isSubmitting}>
+            Cancel
+          </Button>
+          <Button variant='danger' onClick={handleDelete} loading={isSubmitting}>
+            Delete permanently
+          </Button>
+        </>
+      }
+    >
+      <Alert tone='danger' title='This cannot be undone'>
+        Deleting <strong>{collectionName}</strong> removes every document it holds, along
+        with its indexes.
+      </Alert>
+
+      {error && <Alert tone='danger' className='mt-4'>{error}</Alert>}
+    </Modal>
+  )
+}
+
+export default DeleteCollectionModal

package/electron/src/components/collection/SchemaViewModal.jsx

@@ -0,0 +1,369 @@
+/* eslint-disable no-unused-vars */
+import React from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+
+const SchemaViewModal = ({ isOpen, onClose, schema, collectionName }) => {
+  if (!isOpen) return null
+
+  // Function to get a readable type label with appropriate color
+  const getTypeLabel = (type) => {
+    const typeColors = {
+      // Basic types
+      string: 'bg-indigo-100 text-indigo-800 border-indigo-200',
+      number: 'bg-brand-100 text-brand-800 border-green-200',
+      boolean: 'bg-warn-50 text-warn-700 border-yellow-200',
+      date: 'bg-purple-100 text-purple-800 border-purple-200',
+      object: 'bg-info-50 text-info-700 border-blue-200',
+      array: 'bg-pink-100 text-pink-800 border-pink-200',
+      any: 'bg-ink-100 text-ink-800 border-ink-200',
+
+      // Extended primitive types
+      binary: 'bg-cyan-100 text-cyan-800 border-cyan-200',
+      symbol: 'bg-fuchsia-100 text-fuchsia-800 border-fuchsia-200',
+      func: 'bg-rose-100 text-rose-800 border-rose-200',
+      function: 'bg-rose-100 text-rose-800 border-rose-200',
+      alternatives: 'bg-amber-100 text-amber-800 border-amber-200',
+      link: 'bg-sky-100 text-sky-800 border-sky-200',
+
+      // String specialized types
+      uuid: 'bg-violet-100 text-violet-800 border-violet-200',
+      guid: 'bg-violet-100 text-violet-800 border-violet-200',
+      email: 'bg-indigo-100 text-indigo-800 border-indigo-200',
+      uri: 'bg-info-50 text-info-700 border-blue-200',
+      url: 'bg-info-50 text-info-700 border-blue-200',
+      hostname: 'bg-teal-100 text-teal-800 border-teal-200',
+      ip: 'bg-cyan-100 text-cyan-800 border-cyan-200',
+      alphanum: 'bg-indigo-100 text-indigo-800 border-indigo-200',
+      token: 'bg-purple-100 text-purple-800 border-purple-200',
+      hex: 'bg-fuchsia-100 text-fuchsia-800 border-fuchsia-200',
+      base64: 'bg-info-50 text-info-700 border-blue-200',
+
+      // Number specialized types
+      integer: 'bg-emerald-100 text-emerald-800 border-emerald-200',
+      float: 'bg-brand-100 text-brand-800 border-green-200',
+      precision: 'bg-lime-100 text-lime-800 border-lime-200',
+      port: 'bg-teal-100 text-teal-800 border-teal-200',
+
+      // Object specialized types
+      pattern: 'bg-info-50 text-info-700 border-blue-200',
+      schema: 'bg-indigo-100 text-indigo-800 border-indigo-200',
+      instance: 'bg-violet-100 text-violet-800 border-violet-200',
+      ref: 'bg-amber-100 text-amber-800 border-amber-200',
+
+      // Array specialized types
+      items: 'bg-pink-100 text-pink-800 border-pink-200',
+      ordered: 'bg-rose-100 text-rose-800 border-rose-200',
+      tuple: 'bg-fuchsia-100 text-fuchsia-800 border-fuchsia-200',
+
+      // Advanced types
+      lazy: 'bg-purple-100 text-purple-800 border-purple-200',
+      custom: 'bg-red-100 text-red-800 border-red-200',
+      extensions: 'bg-amber-100 text-amber-800 border-amber-200'
+    }
+
+    // Handle compound types (e.g., "string.email")
+    if (type && type.includes('.')) {
+      const parts = type.split('.')
+      const baseType = parts[0]
+      const subType = parts[1]
+
+      // If we have a specific color for the subtype, use it
+      if (typeColors[subType]) {
+        return (
+          <span
+            className={`px-2 py-1 rounded-md text-xs font-medium border ${typeColors[subType]}`}
+          >
+            {type}
+          </span>
+        )
+      }
+
+      // Fall back to base type if available
+      if (typeColors[baseType]) {
+        return (
+          <span
+            className={`px-2 py-1 rounded-md text-xs font-medium border ${typeColors[baseType]}`}
+          >
+            {type}
+          </span>
+        )
+      }
+    }
+
+    const color = typeColors[type] || typeColors.any
+
+    return (
+      <span
+        className={`px-2 py-1 rounded-md text-xs font-medium border ${color}`}
+      >
+        {type}
+      </span>
+    )
+  }
+
+  // Function to get validation rules in a readable format
+  const getValidationRules = (rules) => {
+    if (!rules || !rules.length) return null
+
+    return (
+      <div className='mt-2'>
+        <h6 className='text-xs font-semibold text-ink-500 uppercase tracking-wider mb-1'>
+          Validations
+        </h6>
+        <ul className='space-y-1'>
+          {rules.map((rule, index) => {
+            let ruleText = rule.name
+
+            // Format args based on rule type
+            if (rule.args) {
+              if (
+                rule.name === 'min' ||
+                rule.name === 'max' ||
+                rule.name === 'length'
+              ) {
+                ruleText += `: ${rule.args.limit}`
+              } else if (rule.name === 'email') {
+                ruleText = 'must be a valid email'
+              } else if (rule.name === 'pattern') {
+                ruleText = `matches pattern: ${rule.args.regex}`
+              } else if (typeof rule.args === 'object') {
+                try {
+                  ruleText += `: ${JSON.stringify(rule.args)}`
+                } catch (e) {
+                  // fallback if can't stringify
+                  ruleText += ': has constraints'
+                }
+              }
+            }
+
+            return (
+              <li
+                key={index}
+                className='flex items-center text-xs text-ink-600 pl-2 border-l-2 border-ink-200'
+              >
+                <svg
+                  xmlns='http://www.w3.org/2000/svg'
+                  className='h-3 w-3 mr-1 text-ink-500'
+                  viewBox='0 0 20 20'
+                  fill='currentColor'
+                >
+                  <path
+                    fillRule='evenodd'
+                    d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z'
+                    clipRule='evenodd'
+                  />
+                </svg>
+                {ruleText}
+              </li>
+            )
+          })}
+        </ul>
+      </div>
+    )
+  }
+
+  // Function to render a schema field
+  const renderSchemaField = (fieldName, fieldSchema) => {
+    const fieldType = fieldSchema.type || 'any'
+    const required = fieldSchema._flags?.presence === 'required'
+
+    return (
+      <motion.div
+        initial={{ opacity: 0, y: 10 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.2 }}
+        key={fieldName}
+        className='mb-5 bg-white rounded-lg p-4 shadow-sm border border-ink-200 hover:shadow-md transition-shadow'
+      >
+        <div className='flex flex-col'>
+          <div className='flex items-center justify-between mb-2'>
+            <div className='flex items-center'>
+              <span className='font-bold text-ink-800 mr-2'>{fieldName}</span>
+              {required && (
+                <span className='bg-red-100 text-red-800 text-xs px-2 py-0.5 rounded-full border border-red-200'>
+                  required
+                </span>
+              )}
+            </div>
+            {getTypeLabel(fieldType)}
+          </div>
+
+          {getValidationRules(fieldSchema._rules)}
+
+          {/* Show additional properties if available */}
+          {fieldSchema._flags && Object.keys(fieldSchema._flags).length > 0 && (
+            <div className='mt-2 pt-2 border-t border-ink-100'>
+              <h6 className='text-xs font-semibold text-ink-500 uppercase tracking-wider mb-1'>
+                Properties
+              </h6>
+              <div className='grid grid-cols-2 gap-1'>
+                {Object.entries(fieldSchema._flags).map(
+                  ([key, value]) =>
+                    key !== 'presence' && (
+                      <div key={key} className='text-xs text-ink-600'>
+                        <span className='font-medium'>{key}:</span>{' '}
+                        {String(value)}
+                      </div>
+                    )
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* Display any nested objects if they exist */}
+          {fieldType === 'object' && fieldSchema.keys && (
+            <div className='mt-3 pt-3 border-t border-ink-100'>
+              <h6 className='text-xs font-semibold text-ink-500 uppercase tracking-wider mb-2'>
+                Nested Fields
+              </h6>
+              <div className='pl-4 border-l-2 border-indigo-100'>
+                {Object.entries(fieldSchema.keys).map(
+                  ([nestedKey, nestedSchema]) =>
+                    renderSchemaField(nestedKey, nestedSchema)
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+      </motion.div>
+    )
+  }
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          className='fixed inset-0 bg-black bg-opacity-50 overflow-y-auto h-full w-full z-50 flex justify-center items-center backdrop-filter backdrop-blur-sm'
+        >
+          <motion.div
+            initial={{ scale: 0.9, opacity: 0 }}
+            animate={{ scale: 1, opacity: 1 }}
+            exit={{ scale: 0.9, opacity: 0 }}
+            transition={{ type: 'spring', damping: 25, stiffness: 300 }}
+            className='relative bg-ink-50 rounded-xl shadow-2xl max-w-3xl w-full mx-4 max-h-[90vh] flex flex-col overflow-hidden'
+          >
+            <div className='flex justify-between items-center p-6 border-b bg-gradient-to-r from-blue-50 to-indigo-50'>
+              <h3 className='text-xl font-semibold text-ink-900 flex items-center'>
+                <svg
+                  xmlns='http://www.w3.org/2000/svg'
+                  className='h-6 w-6 mr-2 text-brand-700'
+                  viewBox='0 0 20 20'
+                  fill='currentColor'
+                >
+                  <path d='M5 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2H5zM5 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2H5zM11 5a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V5zM11 13a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z' />
+                </svg>
+                <span>Collection Schema</span>
+                <span className='ml-2 text-brand-700 font-normal'>
+                  <span className='mx-1'>·</span> {collectionName}
+                </span>
+              </h3>
+              <button
+                onClick={onClose}
+                className='text-ink-500 hover:text-ink-700 focus:outline-none bg-white rounded-full p-1 hover:bg-ink-100 transition-colors'
+              >
+                <svg
+                  className='h-6 w-6'
+                  fill='none'
+                  viewBox='0 0 24 24'
+                  stroke='currentColor'
+                >
+                  <path
+                    strokeLinecap='round'
+                    strokeLinejoin='round'
+                    strokeWidth='2'
+                    d='M6 18L18 6M6 6l12 12'
+                  />
+                </svg>
+              </button>
+            </div>
+
+            <div className='p-6 overflow-y-auto flex-grow'>
+              <div className='mb-6 bg-blue-50 border-l-4 border-blue-500 p-4 rounded-md text-blue-700 flex items-start'>
+                <svg
+                  xmlns='http://www.w3.org/2000/svg'
+                  className='h-6 w-6 mr-3 flex-shrink-0 text-blue-500'
+                  fill='none'
+                  viewBox='0 0 24 24'
+                  stroke='currentColor'
+                >
+                  <path
+                    strokeLinecap='round'
+                    strokeLinejoin='round'
+                    strokeWidth='2'
+                    d='M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'
+                  />
+                </svg>
+                <div>
+                  <p className='font-medium mb-1'>Schema Validation</p>
+                  <p className='text-sm'>
+                    This collection uses schema validation. Documents must
+                    conform to the structure defined below before they can be
+                    inserted.
+                  </p>
+                </div>
+              </div>
+
+              {Object.keys(schema).length > 0
+                ? (
+                  <div className='space-y-4'>
+                    <div className='flex items-center justify-between mb-2'>
+                      <h4 className='text-lg font-medium text-ink-800'>
+                        Schema Fields
+                      </h4>
+                      <span className='text-sm text-ink-500'>
+                        {Object.keys(schema).length} fields defined
+                      </span>
+                    </div>
+
+                    {Object.entries(schema).map(([fieldName, fieldSchema]) =>
+                      renderSchemaField(fieldName, fieldSchema)
+                    )}
+                  </div>
+                  )
+                : (
+                  <div className='text-center py-8'>
+                    <svg
+                      xmlns='http://www.w3.org/2000/svg'
+                      className='h-16 w-16 mx-auto text-ink-300 mb-4'
+                      fill='none'
+                      viewBox='0 0 24 24'
+                      stroke='currentColor'
+                    >
+                      <path
+                        strokeLinecap='round'
+                        strokeLinejoin='round'
+                        strokeWidth='2'
+                        d='M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'
+                      />
+                    </svg>
+                    <p className='text-ink-500 mb-2 text-lg'>
+                      No schema fields defined
+                    </p>
+                    <p className='text-ink-400 text-sm'>
+                      This collection has schema validation enabled but no fields
+                      are specified.
+                    </p>
+                  </div>
+                  )}
+            </div>
+
+            <div className='border-t border-ink-200 px-6 py-4 bg-white flex justify-end'>
+              <button
+                type='button'
+                onClick={onClose}
+                className='px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition-colors shadow-sm flex items-center'
+              >
+                <span>Close</span>
+              </button>
+            </div>
+          </motion.div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  )
+}
+
+export default SchemaViewModal

package/electron/src/components/dashboard/CollectionsChart.jsx

@@ -0,0 +1,94 @@
+import { Bar, BarChart, CartesianGrid, Cell, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts'
+import Card, { CardHeader } from '../ui/Card'
+import { EmptyState, Skeleton } from '../ui/Feedback'
+
+const VIZ = [
+  'var(--color-viz-1)', 'var(--color-viz-2)', 'var(--color-viz-3)',
+  'var(--color-viz-4)', 'var(--color-viz-5)', 'var(--color-viz-6)'
+]
+
+/** Recharts' default tooltip doesn't inherit the app's surface treatment. */
+const ChartTooltip = ({ active, payload, label }) => {
+  if (!active || !payload?.length) return null
+
+  return (
+    <div className='rounded-lg border border-ink-200 bg-white px-3 py-2 shadow-float'>
+      <p className='text-xs font-semibold text-ink-900'>{label}</p>
+      <p className='mt-0.5 text-xs tabular-nums text-ink-600'>
+        {payload[0].value.toLocaleString()} documents
+      </p>
+      <p className='text-[10px] text-ink-400'>{payload[0].payload.database}</p>
+    </div>
+  )
+}
+
+/**
+ * Documents per collection, flattened out of the dashboard's nodeTree.
+ *
+ * Horizontal bars because collection names are long and readable labels matter more than
+ * chart convention here. Capped at the busiest 8 - beyond that the bars are too thin to
+ * compare, and the tree view below already lists everything.
+ */
+const CollectionsChart = ({ nodeTree = [], loading = false }) => {
+  const data = nodeTree
+    .flatMap((db) =>
+      (db.collections ?? []).map((collection) => ({
+        name: collection.name ?? collection,
+        database: db.name,
+        documents: collection.documentCount ?? 0
+      }))
+    )
+    .sort((a, b) => b.documents - a.documents)
+    .slice(0, 8)
+
+  return (
+    <Card className='flex flex-col'>
+      <CardHeader
+        title='Documents per collection'
+        subtitle={data.length === 8 ? 'Busiest 8 collections' : 'All collections'}
+      />
+      <div className='flex-1 p-5'>
+        {loading
+          ? <Skeleton className='h-56 w-full' />
+          : data.length === 0
+            ? (
+              <EmptyState
+                className='py-10'
+                title='No collections yet'
+                description='Create a collection and its document count will chart here.'
+              />
+              )
+            : (
+              <ResponsiveContainer width='100%' height={224}>
+                <BarChart data={data} layout='vertical' margin={{ left: 8, right: 16, top: 4, bottom: 4 }}>
+                  <CartesianGrid horizontal={false} stroke='var(--color-ink-200)' />
+                  <XAxis
+                    type='number'
+                    allowDecimals={false}
+                    tick={{ fontSize: 11, fill: 'var(--color-ink-500)' }}
+                    axisLine={false}
+                    tickLine={false}
+                  />
+                  <YAxis
+                    type='category'
+                    dataKey='name'
+                    width={110}
+                    tick={{ fontSize: 11, fill: 'var(--color-ink-600)' }}
+                    axisLine={false}
+                    tickLine={false}
+                  />
+                  <Tooltip content={<ChartTooltip />} cursor={{ fill: 'var(--color-ink-100)' }} />
+                  <Bar dataKey='documents' radius={[0, 6, 6, 0]} animationDuration={800}>
+                    {data.map((entry, index) => (
+                      <Cell key={entry.name} fill={VIZ[index % VIZ.length]} />
+                    ))}
+                  </Bar>
+                </BarChart>
+              </ResponsiveContainer>
+              )}
+      </div>
+    </Card>
+  )
+}
+
+export default CollectionsChart

package/electron/src/components/dashboard/DatabaseTreeView.jsx

@@ -0,0 +1,130 @@
+import { useEffect, useMemo, useState } from 'react'
+import Card, { CardHeader } from '../ui/Card'
+import { Badge, EmptyState, Skeleton } from '../ui/Feedback'
+
+/**
+ * Expandable database → collection tree.
+ *
+ * Loading is now driven by the caller's `loading` prop. The previous version ran its own
+ * `setTimeout(500)` "to simulate loading" over data it already had in props, which just made
+ * the dashboard feel half a second slower than it was.
+ */
+const DatabaseTreeView = ({ treeDB = [], loading = false }) => {
+  const [expanded, setExpanded] = useState({})
+
+  const tree = useMemo(
+    () =>
+      (Array.isArray(treeDB) ? treeDB : []).map((db, dbIndex) => ({
+        id: `db${dbIndex + 1}`,
+        name: db.name,
+        collections: Array.isArray(db.collections)
+          ? db.collections.map((collection, colIndex) => ({
+              id: `db${dbIndex + 1}_col${colIndex + 1}`,
+              // Handles both the current object shape and the older bare-string form.
+              name: collection.name ?? collection,
+              documentCount: collection.documentCount ?? 0
+            }))
+          : []
+      })),
+    [treeDB]
+  )
+
+  // Open the first database so the panel never reads as empty when data exists.
+  useEffect(() => {
+    if (tree.length > 0) setExpanded((current) => ({ [tree[0].id]: true, ...current }))
+  }, [tree])
+
+  const toggle = (id) => setExpanded((current) => ({ ...current, [id]: !current[id] }))
+
+  return (
+    <Card className='flex flex-col'>
+      <CardHeader
+        title='Database structure'
+        subtitle={`${tree.length} database${tree.length === 1 ? '' : 's'}`}
+      />
+
+      <div className='max-h-[19rem] flex-1 overflow-y-auto'>
+        {loading
+          ? (
+            <div className='space-y-3 p-5'>
+              {[0, 1, 2].map((i) => (
+                <div key={i} className='space-y-2'>
+                  <Skeleton className='h-7 w-3/5' />
+                  <div className='space-y-1.5 pl-8'>
+                    <Skeleton className='h-5 w-2/3' />
+                    <Skeleton className='h-5 w-1/2' />
+                  </div>
+                </div>
+              ))}
+            </div>
+            )
+          : tree.length === 0
+            ? (
+              <EmptyState
+                className='py-10'
+                title='No databases yet'
+                description='Databases you create will appear here with their collections.'
+              />
+              )
+            : (
+              <ul className='divide-y divide-ink-100'>
+                {tree.map((db) => {
+                  const isOpen = Boolean(expanded[db.id])
+
+                  return (
+                    <li key={db.id}>
+                      <button
+                        type='button'
+                        onClick={() => toggle(db.id)}
+                        aria-expanded={isOpen}
+                        className='flex w-full items-center gap-2 px-4 py-3 text-left transition-colors hover:bg-ink-50'
+                      >
+                        <svg
+                          className={`h-4 w-4 shrink-0 text-ink-400 transition-transform duration-200 ${isOpen ? 'rotate-90' : ''}`}
+                          fill='none' viewBox='0 0 24 24' stroke='currentColor' strokeWidth={2} aria-hidden='true'
+                        >
+                          <path strokeLinecap='round' strokeLinejoin='round' d='M9 5l7 7-7 7' />
+                        </svg>
+                        <svg className='h-4 w-4 shrink-0 text-brand-600' fill='none' viewBox='0 0 24 24' stroke='currentColor' strokeWidth={2} aria-hidden='true'>
+                          <ellipse cx='12' cy='6' rx='8' ry='3' />
+                          <path d='M4 6v12c0 1.66 3.58 3 8 3s8-1.34 8-3V6' />
+                        </svg>
+                        <span className='min-w-0 flex-1 truncate text-sm font-semibold text-ink-900'>
+                          {db.name}
+                        </span>
+                        <Badge tone='neutral'>{db.collections.length}</Badge>
+                      </button>
+
+                      {isOpen && (
+                        <ul className='ml-[1.6rem] space-y-0.5 border-l border-ink-200 pb-2 pl-3'>
+                          {db.collections.length === 0
+                            ? <li className='py-2 pl-3 text-xs text-ink-400'>No collections</li>
+                            : db.collections.map((collection) => (
+                              <li
+                                key={collection.id}
+                                className='animate-fadeIn flex items-center gap-2 rounded-md px-3 py-1.5 transition-colors hover:bg-ink-50'
+                              >
+                                <svg className='h-4 w-4 shrink-0 text-amber-500' fill='none' viewBox='0 0 24 24' stroke='currentColor' strokeWidth={2} aria-hidden='true'>
+                                  <path strokeLinecap='round' strokeLinejoin='round' d='M3 7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V7z' />
+                                </svg>
+                                <span className='min-w-0 flex-1 truncate text-sm text-ink-700'>
+                                  {collection.name}
+                                </span>
+                                <span className='shrink-0 text-xs tabular-nums text-ink-500'>
+                                  {collection.documentCount.toLocaleString()} docs
+                                </span>
+                              </li>
+                            ))}
+                        </ul>
+                      )}
+                    </li>
+                  )
+                })}
+              </ul>
+              )}
+      </div>
+    </Card>
+  )
+}
+
+export default DatabaseTreeView