flarecms 0.1.0 → 0.1.2

package/src/client/app.tsx

@@ -1,175 +0,0 @@
-import { useEffect, useState } from 'react';
-import { useStore } from '@nanostores/react';
-import { $router, navigate } from './store/router';
-import { $auth } from './store/auth';
-import { $basePath } from './store/config';
-import { $collections } from './store/collections';
-import { loadSettings } from './store/settings';
-import { apiFetch } from './lib/api';
-
-import { AdminLayout } from './layouts/admin-layout';
-import { LoginPage } from './pages/login';
-import { SetupPage } from './pages/setup';
-import { SignupPage } from './pages/signup';
-import { DashboardPage } from './pages/dashboard';
-import { CollectionsPage } from './pages/collections';
-import { CollectionDetailPage } from './pages/collection-detail';
-import { DevicePage } from './pages/device';
-import { SettingsPage } from './pages/settings';
-import { DocumentsPage } from './pages/documents-page';
-import { DocumentDetailPage } from './pages/document-detail-page';
-import { TooltipProvider } from './components/ui/tooltip';
-
-export default function App() {
-  const page = useStore($router);
-  const auth = useStore($auth);
-  const collections = useStore($collections);
-  const [booting, setBooting] = useState(true);
-
-  useEffect(() => {
-    async function checkSetup() {
-      try {
-        // Initial check to trigger Zero-Config redirect if needed
-        await apiFetch('/health');
-        // Load global settings
-        await loadSettings();
-      } catch (err) {
-        console.error('Initial setup check failed:', err);
-      } finally {
-        setBooting(false);
-      }
-    }
-    checkSetup();
-  }, []);
-
-  if (booting) {
-    return (
-      <div className="min-h-screen bg-background flex flex-col items-center justify-center p-6 antialiased">
-        <div className="size-16 bg-muted/30 rounded-2xl flex items-center justify-center mb-8 border border-border/50 shadow-sm relative overflow-hidden group">
-          <div className="absolute inset-0 bg-gradient-to-br from-primary/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
-          <div className="size-8 bg-primary/10 rounded-xl flex items-center justify-center border border-primary/20 shadow-inner animate-pulse">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="16"
-              height="16"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2.5"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              className="text-primary opacity-60"
-            >
-              <path d="M12 2v20" />
-              <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
-            </svg>
-          </div>
-        </div>
-        <div className="text-center space-y-2">
-          <h2 className="text-[10px] font-black uppercase tracking-[0.4em] text-foreground/40 animate-pulse">
-            System Synchronizing
-          </h2>
-          <p className="text-[9px] font-semibold text-muted-foreground/30 uppercase tracking-[0.2em]">
-            Establishing Secure Link
-          </p>
-        </div>
-      </div>
-    );
-  }
-
-  // If setup route is active, bypass Auth Guard
-  if (page?.route === 'setup') {
-    return (
-      <TooltipProvider>
-        <SetupPage />
-      </TooltipProvider>
-    );
-  }
-
-  // Auth Guard: If no token, show Login or Signup based on route
-  if (!auth.token) {
-    return (
-      <TooltipProvider>
-        {page?.route === 'signup' ? <SignupPage /> : <LoginPage />}
-      </TooltipProvider>
-    );
-  }
-
-  // Router Logic for authenticated users
-  if (!page) {
-    return (
-      <TooltipProvider>
-        <div className="min-h-screen bg-background flex items-center justify-center text-muted-foreground p-6">
-          <div className="text-center max-w-sm">
-            <h1 className="text-6xl font-black mb-4 tracking-tighter text-foreground opacity-10">
-              404
-            </h1>
-            <p className="text-[10px] font-semibold uppercase tracking-[0.2em] mb-8">
-              Document Module Not Found
-            </p>
-            <button
-              onClick={() => navigate('home')}
-              className="px-4 py-2 border rounded-md text-xs font-semibold uppercase tracking-widest hover:bg-accent transition-colors"
-            >
-              Return to Dashboard
-            </button>
-          </div>
-        </div>
-      </TooltipProvider>
-    );
-  }
-
-  // Admin pages wrapped in shared Layout
-  return (
-    <TooltipProvider>
-      <AdminLayout>
-        {page.route === 'home' && <DashboardPage />}
-        {page.route === 'collections' && <CollectionsPage />}
-        {page.route === 'device' && <DevicePage />}
-        {page.route?.startsWith?.('settings') && <SettingsPage />}
-
-        {page.route === 'collection' && (
-          <CollectionDetailPage
-            id={page.params.id}
-            slug={page.params.slug}
-            onBack={() => navigate('collections')}
-          />
-        )}
-
-        {page.route === 'document_list' && <DocumentsPage />}
-        {page.route === 'document_edit' && <DocumentDetailPage />}
-
-        {/* Login route while already authenticated -> redirect to home via layout logic or just show dashboard */}
-        {page.route === 'login' && <DashboardPage />}
-
-        {![
-          'home',
-          'collections',
-          'collection',
-          'document_list',
-          'document_edit',
-          'login',
-          'setup',
-          'device',
-          'settings',
-          'settings_general',
-          'settings_seo',
-          'settings_security',
-          'settings_signup',
-        ].includes(page.route) && (
-          <div className="flex flex-col items-center justify-center py-40">
-            <div className="size-16 bg-muted rounded-xl flex items-center justify-center mb-8 border shadow-sm">
-              <div className="size-6 bg-primary/20 rounded-lg animate-pulse" />
-            </div>
-            <h2 className="text-2xl font-bold text-foreground tracking-tight">
-              Module Isolation
-            </h2>
-            <p className="text-[10px] font-semibold text-muted-foreground uppercase tracking-[0.3em] mt-3">
-              Feature currently offline
-            </p>
-          </div>
-        )}
-      </AdminLayout>
-    </TooltipProvider>
-  );
-}

package/src/client/components/app-sidebar.tsx

@@ -1,227 +0,0 @@
-import {
-  LayoutDashboard as LayoutDashboardIcon,
-  Database as DatabaseIcon,
-  Users as UsersIcon,
-  Settings as SettingsIcon,
-  FileText as FileTextIcon,
-  Layers as LayersIcon,
-  MessageSquare as MessageSquareIcon,
-  Menu as MenuIcon,
-  LogOut as LogOutIcon,
-  Sparkles as SparklesIcon,
-} from 'lucide-react';
-
-import {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarHeader,
-  SidebarGroup,
-  SidebarGroupLabel,
-  SidebarGroupContent,
-  SidebarMenu,
-  SidebarMenuItem,
-  SidebarMenuButton,
-  SidebarRail,
-} from './ui/sidebar';
-import { $router, navigate } from '../store/router';
-import { useStore } from '@nanostores/react';
-import { $auth, logout } from '../store/auth';
-import { Avatar, AvatarFallback } from './ui/avatar';
-import { 
-  Tooltip, 
-  TooltipContent, 
-  TooltipTrigger 
-} from './ui/tooltip';
-import { useSidebar } from './ui/sidebar';
-
-import { $settings } from '../store/settings';
-
-import {
-  Collapsible,
-
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from './ui/collapsible';
-import { ChevronRight } from 'lucide-react';
-
-import { $collections } from '../store/collections';
-
-import { Icon } from './ui/icon-picker';
-
-interface AppSidebarProps {
-  variant?: 'sidebar' | 'floating' | 'inset';
-}
-
-export function AppSidebar({ variant = 'sidebar' }: AppSidebarProps) {
-  const page = useStore($router);
-  const auth = useStore($auth);
-  const settings = useStore($settings);
-  const { data: collections } = useStore($collections);
-
-  const menuGroups = [
-    {
-      label: 'Content',
-      items: (collections || []).map((col) => ({
-        label: col.label,
-        icon: col.slug === 'pages' ? FileTextIcon : () => <Icon name={col.icon as any} />,
-        routeName: 'document_list',
-        params: { slug: col.slug },
-      })),
-    },
-    {
-      label: 'Manage',
-      items: [
-        {
-          label: 'Collections',
-          icon: DatabaseIcon,
-          routeName: 'collections',
-          active: page?.route === 'collections',
-        },
-      ],
-    },
-    {
-      label: 'Admin',
-      items: [
-        {
-          label: 'Users',
-          icon: UsersIcon,
-          routeName: 'users',
-          active: page?.route === 'users',
-        },
-        {
-          label: 'Settings',
-          icon: SettingsIcon,
-          routeName: 'settings',
-          active: page?.route === 'settings',
-        },
-      ],
-    },
-  ];
-
-  return (
-    <Sidebar collapsible="icon" variant={variant}>
-      <SidebarHeader className="flex flex-row items-center px-4 py-6 gap-3 group-data-[collapsible=icon]:px-0 group-data-[collapsible=icon]:justify-center transition-[padding,justify-content]">
-        <Tooltip>
-          <TooltipTrigger render={<div className="flex size-8 items-center justify-center rounded-md bg-primary text-primary-foreground shrink-0 shadow-sm cursor-pointer" />}>
-              <SparklesIcon className="size-4" />
-          </TooltipTrigger>
-          <TooltipContent side="right" className="group-data-[collapsible=expanded]:hidden">
-            {settings['flare:site_title'] || 'FlareCMS'}
-          </TooltipContent>
-        </Tooltip>
-        <div className="flex flex-col gap-0.5 group-data-[collapsible=icon]:hidden">
-          <span className="font-semibold text-sidebar-foreground tracking-tight leading-none">
-            {settings['flare:site_title'] || 'FlareCMS'}
-          </span>
-          <span className="text-[10px] text-muted-foreground font-medium uppercase tracking-wider">
-            {settings['flare:site_tagline'] || 'Management'}
-          </span>
-        </div>
-      </SidebarHeader>
-
-      <SidebarContent className="px-2">
-        <SidebarGroup>
-          <SidebarMenu>
-            <SidebarMenuItem>
-              <SidebarMenuButton
-                isActive={page?.route === 'home'}
-                onClick={() => navigate('home')}
-                tooltip="Dashboard"
-              >
-                <LayoutDashboardIcon />
-                <span>Dashboard</span>
-              </SidebarMenuButton>
-            </SidebarMenuItem>
-          </SidebarMenu>
-        </SidebarGroup>
-
-        {menuGroups.map((group) => (
-          <Collapsible
-            key={group.label}
-            defaultOpen
-            className="group/collapsible"
-          >
-            <SidebarGroup>
-              <SidebarGroupLabel
-                render={
-                  <CollapsibleTrigger className="group/trigger flex w-full items-center">
-                    {group.label}
-                    <ChevronRight className="ml-auto size-3.5 transition-transform duration-200 group-data-[state=open]/trigger:rotate-90" />
-                  </CollapsibleTrigger>
-                }
-                className="group/label text-xs font-semibold uppercase tracking-wider text-muted-foreground/70 hover:text-foreground transition-colors cursor-pointer group-data-[collapsible=icon]:hidden"
-              />
-              <CollapsibleContent>
-                <SidebarGroupContent>
-                  <SidebarMenu>
-                    {group.items.map((item) => (
-                      <SidebarMenuItem key={item.label}>
-                        <SidebarMenuButton
-                          isActive={
-                            (item as any).active || page?.route === item.routeName
-                          }
-                          onClick={() => navigate(item.routeName, (item as any).params)}
-                          tooltip={item.label}
-                        >
-                          <item.icon />
-                          <span>{item.label}</span>
-                        </SidebarMenuButton>
-                      </SidebarMenuItem>
-                    ))}
-                  </SidebarMenu>
-                </SidebarGroupContent>
-              </CollapsibleContent>
-            </SidebarGroup>
-          </Collapsible>
-        ))}
-      </SidebarContent>
-
-      <SidebarFooter className="p-4 group-data-[collapsible=icon]:px-0 group-data-[collapsible=icon]:py-4 transition-[padding]">
-        <div className="flex items-center gap-3 group-data-[collapsible=icon]:flex-col group-data-[collapsible=icon]:gap-4">
-          <Tooltip>
-            <TooltipTrigger render={<Avatar className="size-8 rounded-lg shrink-0 cursor-pointer" />}>
-                <AvatarFallback className="text-[10px] font-semibold">
-                  {auth.user?.email.substring(0, 2).toUpperCase()}
-                </AvatarFallback>
-            </TooltipTrigger>
-            <TooltipContent side="right" className="group-data-[collapsible=expanded]:hidden">
-              {auth.user?.email}
-            </TooltipContent>
-          </Tooltip>
-
-          <div className="flex-1 min-w-0 overflow-hidden group-data-[collapsible=icon]:hidden">
-            <p className="text-xs font-medium truncate leading-none mb-1 text-sidebar-foreground">
-              {auth.user?.email.split('@')[0]}
-            </p>
-            <button
-              onClick={() => logout()}
-              className="text-[10px] text-muted-foreground hover:text-primary transition-colors font-medium"
-            >
-              Sign out
-            </button>
-          </div>
-
-          <SidebarMenu className="w-fit group-data-[collapsible=expanded]:block hidden">
-             <SidebarMenuItem>
-                <SidebarMenuButton size="sm" onClick={() => logout()} tooltip="Sign out" className="text-muted-foreground/50 hover:text-destructive">
-                   <LogOutIcon />
-                </SidebarMenuButton>
-             </SidebarMenuItem>
-          </SidebarMenu>
-
-          <div className="group-data-[collapsible=icon]:block hidden">
-             <SidebarMenu>
-                <SidebarMenuItem>
-                   <SidebarMenuButton size="sm" onClick={() => logout()} tooltip="Sign out" className="text-muted-foreground/50 hover:text-destructive">
-                      <LogOutIcon />
-                   </SidebarMenuButton>
-                </SidebarMenuItem>
-             </SidebarMenu>
-          </div>
-        </div>
-      </SidebarFooter>
-      <SidebarRail />
-    </Sidebar>
-  );
-}

package/src/client/components/collection-modal.tsx

@@ -1,215 +0,0 @@
-import React, { useState } from 'react';
-import { Loader2Icon, ChevronRightIcon, SparklesIcon } from 'lucide-react';
-import { api } from '../lib/api';
-
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from './ui/dialog';
-import { Button } from './ui/button';
-import { Input } from './ui/input';
-import { Label } from './ui/label';
-import { IconPicker, Icon } from './ui/icon-picker';
-import { Switch } from './ui/switch';
-import { cn } from '../lib/utils';
-
-interface CollectionModalProps {
-  children: React.ReactElement;
-}
-
-export function CollectionModal({ children }: CollectionModalProps) {
-  const [isOpen, setIsOpen] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const [data, setData] = useState({
-    slug: '',
-    label: '',
-    labelSingular: '',
-    description: '',
-    icon: 'package' as any,
-    isPublic: false,
-  });
-
-  const [isSlugDirty, setIsSlugDirty] = useState(false);
-  const [isSingularDirty, setIsSingularDirty] = useState(false);
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setLoading(true);
-
-    try {
-      await api.post('/collections', { json: data });
-      setIsOpen(false);
-      setData({
-        slug: '',
-        label: '',
-        labelSingular: '',
-        description: '',
-        icon: 'package',
-        isPublic: false,
-      });
-      window.location.reload();
-    } catch (err) {
-      console.error('Failed to create collection:', err);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const update = (key: string, value: any) => {
-    setData((prev) => {
-      const newData = { ...prev, [key]: value };
-
-      if (key === 'label') {
-        if (!isSlugDirty) {
-          newData.slug = value.toLowerCase().replace(/[^a-z0-9]+/g, '-');
-        }
-
-        if (!isSingularDirty) {
-          newData.labelSingular = value.replace(/s$/i, '') || value;
-        }
-      }
-
-      return newData;
-    });
-  };
-
-  return (
-    <Dialog open={isOpen} onOpenChange={setIsOpen}>
-      <DialogTrigger render={children} />
-      <DialogContent className="sm:max-w-[700px] p-0 overflow-hidden border-none shadow-2xl">
-        <form onSubmit={handleSubmit}>
-          {/* Header Section */}
-          <div className="bg-linear-to-b from-muted/50 to-background px-8 pt-8 pb-6 border-b">
-            <div className="flex items-center gap-2 mb-3">
-              <div className="bg-primary/10 text-primary px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-widest flex items-center gap-1.5">
-                <SparklesIcon className="size-3" />
-                Infrastructure
-              </div>
-            </div>
-            <DialogTitle className="text-2xl font-semibold tracking-tight">
-              Create Collection
-            </DialogTitle>
-            <p className="text-muted-foreground text-xs mt-1.5">
-              Define the blueprint for your new high-performance data module.
-            </p>
-          </div>
-
-          <div className="p-8 space-y-6">
-            <div className="grid grid-cols-2 gap-4">
-              <div className="space-y-2.5">
-                <Label className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground/70">
-                  Display Label
-                </Label>
-                <Input
-                  value={data.label}
-                  onChange={(e) => update('label', e.target.value)}
-                  placeholder="Blog Posts"
-                  required
-                  className="h-10 font-medium"
-                />
-              </div>
-              <div className="space-y-2.5">
-                <Label className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground/70">
-                  Singular Label
-                </Label>
-                <Input
-                  value={data.labelSingular}
-                  onChange={(e) => {
-                    setIsSingularDirty(true);
-                    update('labelSingular', e.target.value);
-                  }}
-                  placeholder="Post"
-                  className="h-10 font-medium"
-                />
-              </div>
-            </div>
-
-            <div className="space-y-2.5">
-              <Label className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground/70">
-                Identification Slug
-              </Label>
-              <div className="relative group">
-                <Input
-                  value={data.slug}
-                  onChange={(e) => {
-                    setIsSlugDirty(true);
-                    update('slug', e.target.value);
-                  }}
-                  placeholder="blog-posts"
-                  required
-                  className="h-10 font-mono text-xs pl-8 border-dashed group-focus-within:border-solid transition-all"
-                />
-                <span className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground/40 font-mono text-xs">
-                  /
-                </span>
-              </div>
-            </div>
-
-            <div className="grid grid-cols-2 gap-8 pt-2">
-              <div className="space-y-2.5">
-                <Label className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground/70">
-                  Module Icon
-                </Label>
-                <IconPicker
-                  value={data.icon}
-                  onValueChange={(v) => update('icon', v)}
-                />
-              </div>
-              <div className="space-y-2.5 flex flex-col justify-center">
-                <Label className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground/70 mb-1.5">
-                  Access Policy
-                </Label>
-                <div
-                  className={cn(
-                    'flex items-center justify-between gap-3 px-3 py-2 rounded-lg border transition-all duration-300',
-                    data.isPublic
-                      ? 'bg-primary/5 border-primary/20'
-                      : 'bg-muted/30 border-border',
-                  )}
-                >
-                  <div className="flex flex-col">
-                    <span className="text-[10px] font-bold uppercase tracking-tighter">
-                      {data.isPublic ? 'Public API' : 'Private API'}
-                    </span>
-                    <span className="text-[9px] text-muted-foreground leading-none">
-                      {data.isPublic ? 'Open to everyone' : 'Requires key'}
-                    </span>
-                  </div>
-                  <Switch
-                    checked={data.isPublic}
-                    onCheckedChange={(checked) => update('isPublic', checked)}
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {/* Footer */}
-          <div className="px-8 py-6 bg-background/80 backdrop-blur-md border-t flex justify-end gap-3 sticky bottom-0">
-            <Button
-              type="button"
-              variant="ghost"
-              className="font-semibold text-xs h-10 px-6"
-              onClick={() => setIsOpen(false)}
-            >
-              Discard
-            </Button>
-            <Button
-              type="submit"
-              disabled={loading}
-              className="font-bold text-xs h-10 px-8 shadow-lg shadow-primary/20"
-            >
-              {loading ? (
-                <Loader2Icon className="size-4 animate-spin mr-2" />
-              ) : null}
-              Initialize Collection
-            </Button>
-          </div>
-        </form>
-      </DialogContent>
-    </Dialog>
-  );
-}