flarecms 0.1.0 → 0.1.2

package/src/client/pages/collections.tsx

@@ -1,180 +0,0 @@
-import { useStore } from '@nanostores/react';
-import { $collections } from '../store/collections';
-import { $router, navigate } from '../store/router';
-import { useState } from 'react';
-import {
-  Database as DatabaseIcon,
-  Plus as PlusIcon,
-  Loader2 as Loader2Icon,
-  Search as SearchIcon,
-  Settings2 as Settings2Icon,
-  ExternalLink as ExternalLinkIcon,
-  MoreVertical as MoreVerticalIcon,
-} from 'lucide-react';
-
-import { Button } from '../components/ui/button';
-import { Input } from '../components/ui/input';
-import { Card, CardHeader, CardTitle, CardContent } from '../components/ui/card';
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '../components/ui/table';
-import { CollectionModal } from '../components/collection-modal';
-import { Icon } from '../components/ui/icon-picker';
-
-export function CollectionsPage() {
-  const { data: collections, loading } = useStore($collections);
-  const [searchQuery, setSearchQuery] = useState('');
-
-  const filteredCollections = collections?.filter(
-    (c) =>
-      c.label.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      c.slug.toLowerCase().includes(searchQuery.toLowerCase()),
-  );
-
-  return (
-    <div className="p-6 max-w-container mx-auto space-y-8">
-      {/* Header Section */}
-      <header className="flex flex-col md:flex-row justify-between items-start md:items-center gap-6 px-1">
-        <div>
-          <div className="flex items-center gap-2 mb-1 text-muted-foreground">
-            <DatabaseIcon className="size-3" />
-            <span className="text-[10px] font-semibold uppercase tracking-wider leading-none">
-              Infrastructure
-            </span>
-          </div>
-          <h1 className="text-3xl font-bold tracking-tight text-foreground leading-none">
-            Data Collections
-          </h1>
-        </div>
-
-        <CollectionModal>
-          <Button
-            size="sm"
-            className="font-semibold h-9 px-6 text-xs"
-          >
-            <PlusIcon className="size-3.5 mr-2" />
-            New Collection
-          </Button>
-        </CollectionModal>
-      </header>
-
-      {/* Action Bar */}
-      <div className="flex items-center justify-between gap-4">
-        <div className="relative flex-1 max-w-md">
-          <SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 size-3.5 text-muted-foreground/40" />
-          <Input
-            placeholder="Search collections..."
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            className="pl-9 h-10 bg-muted/20 focus:bg-background border-border rounded-md text-sm"
-          />
-        </div>
-        <div className="text-[10px] font-bold text-muted-foreground/40 uppercase tracking-widest bg-muted/10 px-3 py-2 rounded-md border">
-          {collections?.length || 0} Registered Modules
-        </div>
-      </div>
-
-      {/* Main Table */}
-      <Card className="py-0 shadow-none border-border overflow-hidden">
-        <CardContent className="p-0">
-          <Table>
-            <TableHeader>
-              <TableRow className="hover:bg-transparent text-muted-foreground uppercase text-[10px] font-bold tracking-wider bg-muted/20">
-                <TableHead className="pl-8 py-4">Identity</TableHead>
-                <TableHead>Type</TableHead>
-                <TableHead>Slug Identifier</TableHead>
-                <TableHead className="text-right pr-8">Management</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {loading ? (
-                <TableRow>
-                  <TableCell colSpan={4} className="h-60 text-center">
-                    <Loader2Icon className="size-6 animate-spin mx-auto text-primary/40" />
-                  </TableCell>
-                </TableRow>
-              ) : (
-                filteredCollections?.map((col) => (
-                  <TableRow key={col.id} className="group border-border/50">
-                    <TableCell className="pl-8 py-5">
-                      <div className="flex items-center gap-4">
-                        <div className="size-10 rounded bg-muted flex items-center justify-center border group-hover:bg-primary/5 group-hover:text-primary transition-colors">
-                          <Icon name={col.icon as any} className="size-5 opacity-40 group-hover:opacity-100" />
-                        </div>
-                        <div className="flex flex-col gap-0.5">
-                          <span
-                            className="font-bold text-foreground group-hover:text-primary transition-colors cursor-pointer text-sm leading-none"
-                            onClick={() => navigate('document_list', { slug: col.slug })}
-                          >
-                            {col.label}
-                          </span>
-                          <span className="text-[10px] text-muted-foreground font-medium uppercase tracking-tight">
-                            Data Collection
-                          </span>
-                        </div>
-                      </div>
-                    </TableCell>
-                    <TableCell className="text-[11px] font-bold text-muted-foreground uppercase tracking-widest">
-                      PostgreSQL
-                    </TableCell>
-                    <TableCell>
-                      <code className="text-[10px] font-mono font-bold bg-muted/50 border px-2 py-0.5 rounded text-muted-foreground uppercase">
-                        {col.slug}
-                      </code>
-                    </TableCell>
-                    <TableCell className="text-right pr-8">
-                      <div className="flex items-center justify-end gap-2">
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          className="h-8 px-3 text-[10px] font-bold uppercase tracking-wider gap-2 hover:bg-muted"
-                          onClick={() => navigate('document_list', { slug: col.slug })}
-                        >
-                          <ExternalLinkIcon className="size-3" />
-                          Documents
-                        </Button>
-                        <Button
-                          variant="outline"
-                          size="sm"
-                          className="h-8 px-3 text-[10px] font-bold uppercase tracking-wider gap-2"
-                          onClick={() =>
-                            navigate('collection', { id: col.id, slug: col.slug })
-                          }
-                        >
-                          <Settings2Icon className="size-3" />
-                          Structure
-                        </Button>
-                      </div>
-                    </TableCell>
-                  </TableRow>
-                ))
-              )}
-              {filteredCollections?.length === 0 && !loading && (
-                <TableRow>
-                  <TableCell
-                    colSpan={4}
-                    className="h-60 text-center text-muted-foreground/30 bg-muted/5"
-                  >
-                    <DatabaseIcon className="size-12 mx-auto mb-4 opacity-5" />
-                    <p className="text-sm font-bold uppercase tracking-[0.2em]">
-                      No collection found
-                    </p>
-                    <p className="text-[10px] mt-1 font-medium">
-                      Create your first data collection to begin.
-                    </p>
-                  </TableCell>
-                </TableRow>
-              )}
-            </TableBody>
-          </Table>
-        </CardContent>
-      </Card>
-
-    </div>
-  );
-}

package/src/client/pages/dashboard.tsx

@@ -1,133 +0,0 @@
-import { useState } from 'react';
-import { useStore } from '@nanostores/react';
-import { $collections } from '../store/collections';
-import { $router, navigate } from '../store/router';
-import { CollectionModal } from '../components/collection-modal';
-import { Button } from '../components/ui/button';
-import { Card, CardHeader, CardTitle, CardContent } from '../components/ui/card';
-import {
-  DatabaseIcon,
-  PlusIcon,
-  Loader2Icon,
-  ChevronRightIcon,
-  FileTextIcon,
-  UploadIcon,
-  UserIcon,
-  SparklesIcon,
-} from 'lucide-react';
-
-export function DashboardPage() {
-  const { data: collections, loading } = useStore($collections);
-
-  return (
-    <div className="p-6 max-w-container mx-auto space-y-8">
-      {/* Header Section */}
-      <header className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
-        <div>
-          <h1 className="text-3xl font-bold tracking-tight text-foreground">
-            Dashboard
-          </h1>
-        </div>
-        <div className="flex items-center gap-2">
-          <CollectionModal>
-            <Button
-              variant="outline"
-              size="sm"
-              className="h-9 gap-2 text-xs font-semibold"
-            >
-              <PlusIcon className="size-3.5" />
-              Collection
-            </Button>
-          </CollectionModal>
-
-          <Button
-            variant="outline"
-            size="sm"
-            className="h-9 gap-2 text-xs font-semibold"
-          >
-            <UploadIcon className="size-3.5" />
-            Upload Media
-          </Button>
-        </div>
-      </header>
-
-      {/* Summary Bar */}
-      <div className="flex items-center gap-6 px-4 py-2 bg-muted/30 border border-border/50 rounded-md text-[11px] font-medium text-muted-foreground/60">
-        <div className="flex items-center gap-2">
-          <DatabaseIcon className="size-3 text-blue-400" />
-          <span>{collections?.length || 0} collections</span>
-        </div>
-        <div className="flex items-center gap-2 border-l border-border/50 pl-6">
-          <UserIcon className="size-3 text-green-400" />
-          <span>1 user</span>
-        </div>
-      </div>
-
-      {/* Main Grid */}
-      <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
-        {/* Left Column: Content */}
-        <Card className="py-0 lg:col-span-12 xl:col-span-7 shadow-none border-border overflow-hidden">
-          <CardHeader className="bg-muted/10 border-b py-4 px-6">
-            <CardTitle className="text-sm font-semibold">Content</CardTitle>
-          </CardHeader>
-          <CardContent className="p-0">
-            <div className="divide-y divide-border/50">
-              {collections?.map((col) => (
-                <div
-                  key={col.id}
-                  className="flex items-center justify-between p-6 hover:bg-muted/30 transition-colors cursor-pointer group"
-                  onClick={() => navigate('document_list', { slug: col.slug })}
-                >
-                  <div className="flex items-center gap-4">
-                    <div className="size-10 rounded bg-muted flex items-center justify-center">
-                      {col.slug === 'pages' ? (
-                        <FileTextIcon className="size-5 text-muted-foreground/50 group-hover:text-primary transition-colors" />
-                      ) : (
-                        <DatabaseIcon className="size-5 text-muted-foreground/50 group-hover:text-primary transition-colors" />
-                      )}
-                    </div>
-                    <span className="font-semibold text-foreground/80 group-hover:text-primary transition-colors">
-                      {col.label}
-                    </span>
-                  </div>
-                  <div className="flex items-center gap-2 text-muted-foreground/30">
-                    <ChevronRightIcon className="size-4" />
-                  </div>
-                </div>
-              ))}
-              {(!collections || collections.length === 0) && !loading && (
-                <div className="flex flex-col items-center justify-center py-20 text-muted-foreground/40">
-                  <DatabaseIcon className="size-10 mb-4 opacity-10" />
-                  <p className="text-sm font-medium">No collections found</p>
-                </div>
-              )}
-            </div>
-            {loading && (
-              <div className="flex items-center justify-center py-20">
-                <Loader2Icon className="size-6 animate-spin text-primary/50" />
-              </div>
-            )}
-          </CardContent>
-        </Card>
-
-        {/* Right Column: Activity */}
-        <Card className="py-0 lg:col-span-12 xl:col-span-5 shadow-none border-border overflow-hidden">
-          <CardHeader className="bg-muted/10 border-b py-4 px-6">
-            <CardTitle className="text-sm font-semibold">
-              Recent Activity
-            </CardTitle>
-          </CardHeader>
-          <CardContent className="px-6 py-4 text-center">
-            <div className="py-20 text-muted-foreground/30">
-              <SparklesIcon className="size-8 mx-auto mb-4 opacity-10" />
-              <p className="text-[10px] font-bold uppercase tracking-widest">
-                System Initialized
-              </p>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-
-    </div>
-  );
-}

package/src/client/pages/device.tsx

@@ -1,66 +0,0 @@
-import React, { useState } from 'react';
-import { apiFetch } from '../lib/api';
-import { Button } from '../components/ui/button';
-import { Input } from '../components/ui/input';
-
-export function DevicePage() {
-  const [userCode, setUserCode] = useState('');
-  const [loading, setLoading] = useState(false);
-  const [message, setMessage] = useState('');
-  const [error, setError] = useState('');
-
-  const handleApprove = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setLoading(true);
-    setError('');
-    setMessage('');
-
-    try {
-      const res = await apiFetch('/device/verify', {
-        method: 'POST',
-        body: JSON.stringify({ user_code: userCode }),
-      });
-      const data = await res.json();
-      
-      if (!res.ok) throw new Error(data.error);
-      
-      setMessage('Device successfully authorized! You may return to your CLI.');
-      setUserCode('');
-    } catch (err: any) {
-      setError(err.message);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <div className="max-w-md w-full mx-auto p-6 space-y-6 mt-12">
-      <div className="text-center">
-        <h1 className="text-xl font-bold tracking-tight text-foreground">Device Authorization</h1>
-        <p className="text-[11px] font-semibold tracking-widest text-muted-foreground uppercase mt-2">
-          Approve CLI / Agent Requests
-        </p>
-      </div>
-
-      <form onSubmit={handleApprove} className="space-y-4">
-        <div className="space-y-2">
-          <label className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">User Code</label>
-          <Input 
-            value={userCode}
-            onChange={e => setUserCode(e.target.value.toUpperCase())}
-            placeholder="ABCD-1234"
-            className="text-center text-lg tracking-widest uppercase font-mono"
-            required
-          />
-        </div>
-
-        {error && <div className="text-destructive text-xs font-semibold text-center">{error}</div>}
-        {message && <div className="text-primary text-xs font-semibold text-center">{message}</div>}
-
-        <Button type="submit" className="w-full h-10 font-bold uppercase tracking-widest" disabled={loading}>
-          {loading ? 'Verifying...' : 'Authorize Device'}
-        </Button>
-      </form>
-    </div>
-  );
-}

package/src/client/pages/document-detail-page.tsx

@@ -1,139 +0,0 @@
-import { useEffect, useState } from 'react';
-import { useStore } from '@nanostores/react';
-import { $schema, $activeSlug } from '../store/schema';
-import { $router, navigate } from '../store/router';
-import { apiFetch } from '../lib/api';
-import { DynamicForm } from '../components/dynamic-form';
-import {
-  ArrowLeft as ArrowLeftIcon,
-  Database as DatabaseIcon,
-  Loader2 as Loader2Icon,
-  Sparkles as SparklesIcon,
-} from 'lucide-react';
-import { Button } from '../components/ui/button';
-import { toast } from 'sonner';
-
-export function DocumentDetailPage() {
-  const page = useStore($router);
-  const { data: schema, loading: schemaLoading } = useStore($schema);
-  const [document, setDocument] = useState<any>(null);
-  const [loading, setLoading] = useState(true);
-  const [isSubmitting, setIsSubmitting] = useState(false);
-
-  const slug = (page as any).params.slug;
-  const id = (page as any).params.id;
-
-  useEffect(() => {
-    if (slug) {
-      $activeSlug.set(slug);
-    }
-    return () => $activeSlug.set(null);
-  }, [slug]);
-
-  const fetchDocument = async () => {
-    if (id === 'new') {
-      setDocument({});
-      setLoading(false);
-      return;
-    }
-
-    setLoading(true);
-    try {
-      const response = await apiFetch(`/content/${slug}/${id}`);
-      if (response.ok) {
-        const result = await response.json();
-        setDocument(result.data);
-      }
-    } catch (err) {
-      console.error(err);
-      toast.error('Failed to load document structure');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    fetchDocument();
-  }, [slug, id]);
-
-  const handleSubmit = async (data: any) => {
-    setIsSubmitting(true);
-    try {
-      const method = id === 'new' ? 'POST' : 'PUT';
-      const url =
-        id === 'new' ? `/content/${slug}` : `/content/${slug}/${id}`;
-
-      const response = await apiFetch(url, {
-        method,
-        body: JSON.stringify(data),
-      });
-
-      const result = await response.json();
-
-      if (response.ok) {
-        toast.success(id === 'new' ? 'Document deployed' : 'Fragment updated');
-        if (id === 'new' && result.data.id) {
-          navigate('document_edit', { slug, id: result.data.id });
-        } else {
-          navigate('document_list', { slug });
-        }
-      } else {
-        toast.error(result.error || 'Operation failed');
-      }
-    } catch (err: any) {
-      console.error(err);
-      toast.error(err.message || 'Verification error encountered');
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-
-  if (schemaLoading || loading) {
-    return (
-      <div className="flex flex-col items-center justify-center h-full py-20 text-muted-foreground gap-6">
-        <Loader2Icon className="size-10 animate-spin text-primary" />
-        <p className="font-semibold text-[10px] uppercase tracking-wider">
-          Initializing Workspace...
-        </p>
-      </div>
-    );
-  }
-
-  return (
-    <div className="p-6 max-w-container mx-auto space-y-8">
-      <header className="flex items-center gap-4 px-1">
-         <Button
-          variant="outline"
-          size="icon"
-          onClick={() => navigate('document_list', { slug })}
-          className="size-9 rounded-md shrink-0 transition-transform active:scale-95"
-        >
-          <ArrowLeftIcon className="size-4" />
-        </Button>
-        <div>
-          <div className="flex items-center gap-2 mb-1 text-muted-foreground">
-            <SparklesIcon className="size-3" />
-            <span className="text-[10px] font-semibold uppercase tracking-wider leading-none">
-              Document Processing
-            </span>
-          </div>
-          <h2 className="text-sm font-bold tracking-tight text-foreground leading-none">
-            {!id
-              ? `New ${schema?.label_singular || 'Document'}`
-              : `Edit ${schema?.label_singular || 'Document'}`}
-          </h2>
-        </div>
-      </header>
-
-      <div className="bg-background border rounded-lg p-8 shadow-sm">
-        <DynamicForm
-          slug={slug}
-          initialData={document}
-          onSubmit={handleSubmit}
-          isSubmitting={isSubmitting}
-          onCancel={() => navigate('document_list', { slug })}
-        />
-      </div>
-    </div>
-  );
-}

package/src/client/pages/documents-page.tsx

@@ -1,103 +0,0 @@
-import { useStore } from '@nanostores/react';
-import { $schema, $activeSlug } from '../store/schema';
-import { $router, navigate } from '../store/router';
-import { useEffect } from 'react';
-import { ContentList } from '../components/content-list';
-import {
-  Database as DatabaseIcon,
-  Plus as PlusIcon,
-  ChevronRight as ChevronRightIcon,
-  Settings as SettingsIcon,
-} from 'lucide-react';
-import { Button } from '../components/ui/button';
-
-export function DocumentsPage() {
-  const page = useStore($router);
-  const { data: schema, loading } = useStore($schema);
-  const slug = (page as any).params.slug;
-
-  useEffect(() => {
-    if (slug) {
-      $activeSlug.set(slug);
-    }
-    return () => $activeSlug.set(null);
-  }, [slug]);
-
-  if (loading) return null;
-
-  const hasFields = schema?.fields && schema.fields.length > 0;
-
-  return (
-    <div className="p-6 max-w-container mx-auto space-y-8">
-      <header className="flex flex-col md:flex-row md:items-center justify-between gap-6 px-1">
-        <div className="flex items-center gap-3">
-          <div className="flex items-center gap-2 text-muted-foreground">
-            <DatabaseIcon className="size-4" />
-            <ChevronRightIcon className="size-3 opacity-30" />
-          </div>
-          <div>
-            <div className="flex items-center gap-2 mb-1 text-muted-foreground">
-              <span className="text-[10px] font-semibold uppercase tracking-wider leading-none">
-                Collection Registry
-              </span>
-            </div>
-            <h1 className="text-3xl font-bold tracking-tight text-foreground leading-none">
-              {schema?.label || slug}
-            </h1>
-          </div>
-        </div>
-
-        <div className="flex items-center gap-2">
-          <Button
-            variant="outline"
-            size="sm"
-            className="font-semibold h-9 px-4 text-xs gap-2"
-            onClick={() => navigate('collection', { id: schema?.id, slug })}
-          >
-            <SettingsIcon className="size-3.5" />
-            Config
-          </Button>
-          <Button
-            size="sm"
-            disabled={!hasFields}
-            className="font-bold h-9 px-6 text-xs gap-2 shadow-sm"
-            onClick={() => navigate('document_edit', { slug, id: 'new' })}
-          >
-            <PlusIcon className="size-3.5" />
-            New Document
-          </Button>
-        </div>
-      </header>
-
-      {!hasFields && (
-        <div className="p-8 border-2 border-dashed border-primary/20 bg-primary/5 rounded-xl animate-in fade-in slide-in-from-top-4 duration-500">
-          <div className="flex flex-col md:flex-row items-center gap-6 text-center md:text-left">
-            <div className="size-12 rounded-full bg-primary/10 flex items-center justify-center text-primary border border-primary/20 shrink-0">
-              <SettingsIcon className="size-6" />
-            </div>
-            <div className="flex-1 space-y-1">
-              <h3 className="text-sm font-bold uppercase tracking-widest text-primary">
-                Immutable Data Structure
-              </h3>
-              <p className="text-xs text-muted-foreground font-medium leading-relaxed">
-                This collection is currently defined with zero fields. In order
-                to begin populating data, you must first initialize your schema
-                definitions in the structural configuration panel.
-              </p>
-            </div>
-            <Button
-              variant="outline"
-              size="sm"
-              className="h-9 px-6 text-[10px] font-black uppercase tracking-widest border-primary/20 hover:bg-primary/10 hover:text-primary transition-colors"
-              onClick={() => navigate('collection', { id: schema?.id, slug })}
-            >
-              Add Fields
-            </Button>
-          </div>
-        </div>
-      )}
-
-      <ContentList slug={slug} />
-    </div>
-  );
-}