@catalystlabs/awm/studio/components/CollectionList.js

Appwrite Migration Tool - Schema management and code generation for Appwrite databases

'use client';

import { useRouter } from 'next/navigation';
import { List, FlexboxGrid, Badge, IconButton } from 'rsuite';
import { RefreshCw, Inbox } from 'lucide-react';
import { getCollectionIconName } from '@/lib/utils';
import LucideIcon from './LucideIcon';

export default function CollectionList({ collections, onRefresh }) {
  const router = useRouter();

  if (collections.length === 0) {
    return (
      <div className="empty-state">
        <div style={{ marginBottom: '16px', display: 'flex', justifyContent: 'center' }}>
          <Inbox size={48} color="#999" />
        </div>
        <h4>No collections found</h4>
        <p style={{ color: '#999', marginTop: '8px' }}>
          Create collections using the AWM CLI or Appwrite Console
        </p>
      </div>
    );
  }

  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
        <h5>All Collections ({collections.length})</h5>
        <IconButton
          icon={<RefreshCw size={16} />}
          appearance="subtle"
          size="sm"
          onClick={onRefresh}
        >
          Refresh
        </IconButton>
      </div>

      <List hover>
        {collections.map((collection) => {
          const iconName = getCollectionIconName(collection.name);
          return (
            <List.Item
              key={collection.$id}
              className="collection-card"
              style={{
                padding: '16px',
                cursor: 'pointer',
                borderBottom: '1px solid #f0f0f0'
              }}
              onClick={() => router.push(`/collections/${collection.$id}`)}
            >
              <FlexboxGrid align="middle">
                <FlexboxGrid.Item colspan={2}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <LucideIcon name={iconName} size={32} color="#667eea" />
                  </div>
                </FlexboxGrid.Item>

                <FlexboxGrid.Item colspan={12} style={{ paddingLeft: '16px' }}>
                  <div>
                    <strong style={{ fontSize: '16px' }}>{collection.name}</strong>
                    <div style={{ fontSize: '12px', color: '#999', marginTop: '4px' }}>
                      ID: {collection.$id}
                    </div>
                  </div>
                </FlexboxGrid.Item>

                <FlexboxGrid.Item colspan={10} style={{ textAlign: 'right' }}>
                  <div style={{ display: 'flex', gap: '8px', justifyContent: 'flex-end' }}>
                    <Badge content={collection.attributes.length} style={{ background: '#667eea' }}>
                      <div style={{ fontSize: '12px', color: '#666' }}>Attributes</div>
                    </Badge>
                    <Badge content={collection.indexes.length} style={{ background: '#764ba2' }}>
                      <div style={{ fontSize: '12px', color: '#666' }}>Indexes</div>
                    </Badge>
                  </div>
                </FlexboxGrid.Item>
              </FlexboxGrid>
            </List.Item>
          );
        })}
      </List>
    </div>
  );
}