flarecms 0.1.0

package/src/client/app.tsx

@@ -0,0 +1,175 @@
+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

@@ -0,0 +1,227 @@
+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

@@ -0,0 +1,215 @@
+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>
+  );
+}