flarecms 0.1.0

package/src/client/layouts/settings-layout.tsx

@@ -0,0 +1,104 @@
+import { useStore } from '@nanostores/react';
+import { $router, navigate } from '../store/router';
+import {
+  Settings as SettingsIcon,
+  Search as SearchIcon,
+  ShieldCheck as SecurityIcon,
+  Globe as SeoIcon,
+  Users as SignupIcon,
+  Key as ApiIcon,
+  ChevronRight as ChevronRightIcon,
+} from 'lucide-react';
+import { cn } from '../lib/utils';
+import { Button } from '../components/ui/button';
+
+export function SettingsSidebar() {
+  const page = useStore($router);
+
+  const nav = [
+    { label: 'General', route: 'settings_general', icon: SettingsIcon },
+    { label: 'SEO', route: 'settings_seo', icon: SeoIcon },
+    { label: 'Security', route: 'settings_security', icon: SecurityIcon },
+    { label: 'Signup', route: 'settings_signup', icon: SignupIcon },
+    { label: 'API Tokens', route: 'settings', icon: ApiIcon },
+  ];
+
+  return (
+    <div className="w-full lg:w-64 space-y-1 pr-4">
+      <div className="mb-8 px-3">
+        <h2 className="text-xl font-bold tracking-tight text-foreground flex items-center gap-2">
+          Settings
+        </h2>
+        <p className="text-[10px] uppercase tracking-[0.2em] font-semibold text-muted-foreground opacity-50 mt-1">
+          System Configuration
+        </p>
+      </div>
+
+      <div className="space-y-1">
+        {nav.map((item) => {
+          const isActive = page?.route === item.route;
+          return (
+            <Button
+              key={item.route}
+              variant="ghost"
+              className={cn(
+                'w-full justify-start gap-3 h-10 px-3 text-xs font-semibold tracking-wide transition-all group relative overflow-hidden',
+                isActive
+                  ? 'bg-primary/5 text-primary'
+                  : 'text-muted-foreground hover:bg-accent hover:text-foreground',
+              )}
+              onClick={() => navigate(item.route)}
+            >
+              {isActive && (
+                <div className="absolute left-0 top-1/2 -translate-y-1/2 w-0.5 h-4 bg-primary rounded-full" />
+              )}
+              <item.icon
+                className={cn(
+                  'size-4 transition-colors',
+                  isActive
+                    ? 'text-primary'
+                    : 'opacity-40 group-hover:opacity-100',
+                )}
+              />
+              {item.label}
+              <ChevronRightIcon
+                className={cn(
+                  'size-3 ml-auto opacity-0 -translate-x-1 transition-all',
+                  isActive && 'opacity-20 translate-x-0',
+                )}
+              />
+            </Button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export function SettingsLayout({
+  children,
+  title,
+  subtitle,
+}: {
+  children: React.ReactNode;
+  title: string;
+  subtitle: string;
+}) {
+  return (
+    <div className="max-w-container mx-auto py-8 px-6 flex flex-col lg:flex-row gap-12">
+      <SettingsSidebar />
+      <div className="flex-1 space-y-8">
+        <div className="border-b border-border/50 pb-8 relative">
+          <h1 className="text-3xl font-black tracking-tight text-foreground">
+            {title}
+          </h1>
+          <p className="text-sm text-muted-foreground mt-2 font-medium">
+            {subtitle}
+          </p>
+          <div className="absolute -bottom-px left-0 w-12 h-px bg-primary" />
+        </div>
+        <div className="mt-8">{children}</div>
+      </div>
+    </div>
+  );
+}

package/src/client/lib/api.ts

@@ -0,0 +1,72 @@
+import ky from 'ky';
+import { $auth } from '../store/auth';
+import { navigate } from '../store/router';
+import { $apiBaseUrl } from '../store/config';
+
+/**
+ * Core API instance pre-configured with:
+ * 1. Automatic Bearer Token injection via beforeRequest hook
+ * 2. Automatic Zero-Config redirect via afterResponse hook
+ * 3. Standard error handling for non-2xx responses (built-in ky behavior)
+ */
+export const api = ky.create({
+  prefix: $apiBaseUrl.get(),
+  hooks: {
+    beforeRequest: [
+      ({ request }) => {
+        const { token } = $auth.get();
+        if (token) {
+          request.headers.set('Authorization', `Bearer ${token}`);
+        }
+      }
+    ],
+    afterResponse: [
+      async ({ request, response }) => {
+        // Intercept Unauthorized (Session Expired)
+        if (response.status === 401 && !request.url.includes('/auth/')) {
+          $auth.set({ token: null, user: null });
+          if (!request.url.includes('/login')) {
+            navigate('login');
+          }
+        }
+
+        // Intercept Setup Required (Zero-Config flow)
+        if (response.status === 403) {
+          try {
+            const data: any = await response.clone().json();
+            if (data.code === 'SETUP_REQUIRED' && !request.url.includes('/setup')) {
+              navigate('setup');
+            }
+          } catch {
+            // Not JSON or parse error - ignore
+          }
+        }
+      }
+    ]
+  }
+});
+
+/**
+ * A legacy wrapper for components still expecting a standard Response object from apiFetch.
+ * Uses the ky 'api' instance under the hood.
+ * 
+ * @deprecated Use the 'api' instance directly (e.g., api.get().json()) for new code.
+ */
+export async function apiFetch(path: string, options: RequestInit = {}) {
+  // ky handles most RequestInit options directly
+  const { headers, ...rest } = options;
+
+  // Cast method to something ky accepts (strict string types)
+  const method = (options.method?.toLowerCase() || 'get') as any;
+
+  // We cast to any to allow the caller to treat it as a standard fetch Response
+  // which has .json(): Promise<any> instead of Promise<unknown>
+  return api(path, {
+    method,
+    headers,
+    ...rest,
+    // ky throws on non-2xx by default, but standard fetch/apiFetch does not.
+    // We set throwHttpErrors: false to maintain backward compatibility during the transition.
+    throwHttpErrors: false,
+  }) as any;
+}

package/src/client/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/client/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './app';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);