@dyrected/admin 1.0.1

package/src/components/layout/admin-shell.tsx

@@ -0,0 +1,479 @@
+import * as React from "react"
+import { useState, useEffect } from "react"
+import { useQuery } from "@tanstack/react-query"
+import { Link, useLocation } from "react-router-dom"
+import {
+  Database,
+  Image as ImageIcon,
+  Settings,
+  LogOut,
+  Menu,
+  X,
+  ChevronRight,
+  ChevronDown,
+  PanelLeftClose,
+  PanelLeftOpen,
+  Sparkles,
+  Lock,
+  Shield,
+  Share2,
+  LayoutDashboard,
+  Users,
+} from "lucide-react"
+import { useDyrected } from "../../providers/dyrected-provider"
+import { cn, getMediaUrl } from "../../lib/utils"
+import { BrandingProvider } from "./branding-provider"
+import logo from "@/assets/dyrected.svg"
+
+// ---------------------------------------------------------------------------
+// Single nav item
+// ---------------------------------------------------------------------------
+function NavItem({
+  to,
+  icon: Icon,
+  label,
+  active,
+  collapsed,
+  onClick,
+}: {
+  to: string
+  icon: React.ElementType
+  label: React.ReactNode
+  active: boolean
+  collapsed: boolean
+  onClick?: () => void
+}) {
+  return (
+    <Link
+      to={to}
+      onClick={onClick}
+      className={cn(
+        "group flex items-center gap-3 rounded-md px-3 py-2 text-[13px] font-medium transition-all duration-150",
+        collapsed ? "justify-center px-2" : "",
+        active
+          ? "bg-primary text-primary-foreground"
+          : "text-muted-foreground hover:bg-accent hover:text-foreground"
+      )}
+    >
+      <Icon
+        className={cn(
+          "shrink-0 transition-colors",
+          collapsed ? "h-[17px] w-[17px]" : "h-[15px] w-[15px]",
+          active ? "text-background" : "text-muted-foreground group-hover:text-foreground"
+        )}
+      />
+      {!collapsed && <span className="truncate">{label}</span>}
+      {!collapsed && active && (
+        <ChevronRight className="ml-auto h-3.5 w-3.5 opacity-50 shrink-0" />
+      )}
+    </Link>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Nav Group (Collapsible)
+// ---------------------------------------------------------------------------
+function NavGroup({
+  label,
+  children,
+  collapsed,
+  defaultExpanded = true,
+}: {
+  label: string
+  children: React.ReactNode
+  collapsed: boolean
+  defaultExpanded?: boolean
+}) {
+  const [expanded, setExpanded] = useState(defaultExpanded)
+
+  if (collapsed) {
+    return (
+      <div className="space-y-1">
+        <div className="my-2 mx-3 h-px bg-border" />
+        {children}
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-1">
+      <button
+        onClick={() => setExpanded(!expanded)}
+        className="flex w-full items-center justify-between px-3 mt-4 mb-1 group"
+      >
+        <span className="text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/40 group-hover:text-muted-foreground/60 transition-colors">
+          {label}
+        </span>
+        {expanded ? (
+          <ChevronDown className="h-3 w-3 text-muted-foreground/30 group-hover:text-muted-foreground/50" />
+        ) : (
+          <ChevronRight className="h-3 w-3 text-muted-foreground/30 group-hover:text-muted-foreground/50" />
+        )}
+      </button>
+      <div className={cn("space-y-0.5 overflow-hidden transition-all duration-200", expanded ? "max-h-[1000px] opacity-100" : "max-h-0 opacity-0")}>
+        {children}
+      </div>
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Sidebar inner content (shared)
+// ---------------------------------------------------------------------------
+function SidebarInner({
+  schemas,
+  isLoading,
+  location,
+  logout,
+  isEmbedded,
+  collapsed,
+  onToggleCollapse,
+  onNavigate,
+}: {
+  schemas: any
+  isLoading: boolean
+  location: ReturnType<typeof useLocation>
+  logout: () => void
+  isEmbedded: boolean
+  collapsed: boolean
+  onToggleCollapse?: () => void
+  onNavigate?: () => void
+}) {
+  const { client } = useDyrected()
+  const collections = schemas?.collections?.filter((c: any) => !c?.admin?.hidden && !c?.slug.startsWith('platform_')) ?? []
+  const globals = schemas?.globals?.filter((g: any) => !g?.admin?.hidden && !g?.slug.startsWith('platform_')) ?? []
+  const uploadCollections = collections.filter((c: any) => c.upload)
+
+  const groupLabel = (text: string) =>
+    !collapsed ? (
+      <p className="px-3 mb-1.5 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground/50">
+        {text}
+      </p>
+    ) : (
+      <div className="my-2 mx-3 h-px bg-border" />
+    )
+
+  const branding = schemas?.admin?.branding;
+
+  return (
+    <div className="flex flex-col min-h-screen admin-ui">
+      {/* Logo */}
+      <div
+        className={cn(
+          "flex items-center h-14 shrink-0 transition-all",
+          collapsed ? "justify-center px-2" : "gap-2.5 px-4"
+        )}
+      >
+        <div>
+          {!isEmbedded && (
+            <>
+              {branding?.logo || branding?.logoMark ? (
+                <div className="h-7 w-7 flex items-center justify-center shrink-0">
+                  <img
+                    src={getMediaUrl(collapsed ? (branding.logoMark || branding.logo) : (branding.logo || branding.logoMark), client?.getBaseUrl() || "")}
+                    alt="Logo"
+                    className="max-h-full max-w-full object-contain"
+                  />
+                </div>
+              ) : (
+                <div className="h-7 w-auto flex items-center justify-center shrink-0">
+                  <img src={logo} alt="Dyrected" className="h-8 w-auto" />
+                </div>
+              )}
+              {!collapsed && (
+                <span className="font-serif text-lg tracking-tight text-foreground flex-1 truncate">
+                  {branding?.titleSuffix?.replace(/^- /, '') || ''}
+                </span>
+              )}
+            </>
+          )}
+        </div>
+        {/* Desktop Toggle - Only visible on desktop since mobile uses overlay */}
+
+      </div>
+
+
+      {/* Nav */}
+      <nav className="flex-1 overflow-y-auto py-4 px-2 space-y-4">
+        <div>
+          <NavItem
+            to="/"
+            icon={LayoutDashboard}
+            label="Dashboard"
+            active={location.pathname === "/" || location.pathname === ""}
+            collapsed={collapsed}
+            onClick={onNavigate}
+          />
+        </div>
+
+        {uploadCollections.length > 0 && (
+          <div>
+            {groupLabel("Media")}
+            {uploadCollections.map((col: any) => (
+              <NavItem
+                key={col.slug}
+                to={`/collections/${col.slug}`}
+                icon={ImageIcon}
+                label={col.labels?.plural ?? col.label ?? col.slug}
+                active={location.pathname.startsWith(`/collections/${col.slug}`)}
+                collapsed={collapsed}
+                onClick={onNavigate}
+              />
+            ))}
+          </div>
+        )}
+
+        {(isLoading || collections.filter((c: any) => !c.upload).length > 0) && (
+          <div>
+            {isLoading ? (
+              <div className="space-y-1 px-1">
+                {[1, 2, 3].map((i) => (
+                  <div key={i} className={cn("h-8 rounded-md bg-muted/60 animate-pulse", collapsed ? "mx-1" : "mx-2")} />
+                ))}
+              </div>
+            ) : (() => {
+              const nonUpload = collections.filter((col: any) => !col.upload)
+              const groups = new Map<string, any[]>()
+              const ungrouped: any[] = []
+
+              nonUpload.forEach((col: any) => {
+                let g = col.admin?.group
+                if (!g && col.auth) g = "System"
+
+                if (g) {
+                  if (!groups.has(g)) groups.set(g, [])
+                  groups.get(g)!.push(col)
+                } else {
+                  ungrouped.push(col)
+                }
+              })
+
+              const renderCollectionItem = (col: any) => {
+                const isReadOnly = col.access?.read && !col.access?.create && !col.access?.update && !col.access?.delete
+                const navLabel = (
+                  <div className="flex items-center gap-1.5 min-w-0">
+                    <span className="truncate">{col.labels?.plural ?? col.label ?? col.slug}</span>
+                    {!collapsed && (
+                      <div className="flex gap-1 shrink-0">
+                        {col.auth && <Shield className="h-4 w-4 text-primary/70" />}
+                        {col.shared && <Share2 className="h-4 w-4 text-purple-500/70" />}
+                        {isReadOnly && <Lock className="h-4 w-4 text-muted-foreground/40" />}
+                      </div>
+                    )}
+                  </div>
+                )
+
+                return (
+                  <NavItem
+                    key={col.slug}
+                    to={`/collections/${col.slug}`}
+                    icon={col.auth ? Users : Database}
+                    label={navLabel}
+                    active={location.pathname.startsWith(`/collections/${col.slug}`)}
+                    collapsed={collapsed}
+                    onClick={onNavigate}
+                  />
+                )
+              }
+
+              return (
+                <div className="space-y-1">
+                  {/* Grouped sections */}
+                  {Array.from(groups.entries()).map(([groupName, cols]) => (
+                    <NavGroup key={groupName} label={groupName} collapsed={collapsed} defaultExpanded={true}>
+                      {cols.map(col => renderCollectionItem(col))}
+                    </NavGroup>
+                  ))}
+
+                  {/* Ungrouped */}
+                  {ungrouped.length > 0 && (
+                    <NavGroup label="Collections" collapsed={collapsed} defaultExpanded={true}>
+                      {ungrouped.map(col => renderCollectionItem(col))}
+                    </NavGroup>
+                  )}
+                </div>
+              )
+            })()}
+          </div>
+        )}
+
+
+        {globals.length > 0 && (
+          <div>
+            {groupLabel("Configuration")}
+            <div className="space-y-0.5">
+              {globals.map((glob: any) => (
+                <NavItem
+                  key={glob.slug}
+                  to={`/globals/${glob.slug}`}
+                  icon={Settings}
+                  label={glob.label ?? glob.slug}
+                  active={location.pathname === `/globals/${glob.slug}`}
+                  collapsed={collapsed}
+                  onClick={onNavigate}
+                />
+              ))}
+            </div>
+          </div>
+        )}
+      </nav>
+
+      {/* Footer */}
+      <div className="border-t border-border px-2 py-3 shrink-0 space-y-0.5">
+        {/* Integration guide — always visible so embedded users can access the prompt */}
+        <NavItem
+          to="/setup"
+          icon={Sparkles}
+          label="Integration Guide"
+          active={location.pathname === "/setup"}
+          collapsed={collapsed}
+          onClick={onNavigate}
+        />
+
+        {!isEmbedded && (
+          <button
+            onClick={logout}
+            title={collapsed ? "Logout" : undefined}
+            className={cn(
+              "flex w-full items-center gap-3 rounded-md px-3 py-2 text-[13px] font-medium text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive",
+              collapsed ? "justify-center px-2" : ""
+            )}
+          >
+            <LogOut className="h-[15px] w-[15px] shrink-0" />
+            {!collapsed && <span>Logout</span>}
+          </button>
+        )}
+      </div>
+
+      {/* Desktop Collapse Toggle at Bottom */}
+      {onToggleCollapse && !isEmbedded && (
+        <div className="mt-auto p-4 border-t border-border/40">
+          <button
+            onClick={onToggleCollapse}
+            className={cn(
+              "w-full flex items-center gap-3 p-2.5 rounded-xl text-muted-foreground/60 hover:text-foreground hover:bg-accent/50 transition-all group/btn",
+              collapsed ? "justify-center" : "px-3"
+            )}
+            title={collapsed ? "Expand sidebar" : "Collapse sidebar"}
+          >
+            {collapsed ? (
+              <PanelLeftOpen className="h-5 w-5" />
+            ) : (
+              <>
+                <PanelLeftClose className="h-5 w-5 group-hover/btn:-translate-x-0.5 transition-transform" />
+                <span className="text-sm font-medium text-[13px]">Collapse Sidebar</span>
+              </>
+            )}
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// AdminShell
+// ---------------------------------------------------------------------------
+export function AdminShell({
+  children,
+  isEmbedded = false,
+}: {
+  children: React.ReactNode
+  isEmbedded?: boolean
+}) {
+  const { client, logout } = useDyrected()
+  const location = useLocation()
+
+  // Desktop: collapsed state (sidebar still sits in the layout)
+  const [collapsed, setCollapsed] = useState(false)
+  // Mobile: open/close overlay
+  const [mobileOpen, setMobileOpen] = useState(false)
+
+  // Close mobile sidebar on navigation
+  useEffect(() => {
+    setMobileOpen(false)
+  }, [location.pathname])
+
+  // Lock scroll on mobile when open
+  useEffect(() => {
+    document.body.style.overflow = mobileOpen ? "hidden" : ""
+    return () => { document.body.style.overflow = "" }
+  }, [mobileOpen])
+
+  const { data: schemas, isLoading } = useQuery({
+    queryKey: ["schemas"],
+    queryFn: async () => {
+      if (!client) return null
+      return client.getSchemas()
+    },
+    enabled: !!client,
+  })
+
+  return (
+    <BrandingProvider>
+      <div className={cn("flex w-full relative", isEmbedded ? "h-full min-h-[600px]" : "min-h-screen")}>
+        {/* ... existing sidebar and main content ... */}
+        <aside
+          className={cn(
+            "hidden md:flex flex-col shrink-0 h-full border-r border-border bg-background transition-all duration-300 overflow-hidden",
+            collapsed ? "w-[56px]" : "w-[220px]"
+          )}
+        >
+          <SidebarInner
+            schemas={schemas}
+            isLoading={isLoading}
+            location={location}
+            logout={logout}
+            isEmbedded={isEmbedded}
+            collapsed={collapsed}
+            onToggleCollapse={() => setCollapsed((v) => !v)}
+          />
+        </aside>
+
+        {mobileOpen && (
+          <div
+            className="fixed inset-0 z-30 bg-black/30 md:hidden"
+            onClick={() => setMobileOpen(false)}
+          />
+        )}
+        <aside
+          className={cn(
+            "fixed top-0 left-0 z-40 h-full w-[220px] flex flex-col border-r border-border bg-background transition-transform duration-300 ease-in-out md:hidden",
+            mobileOpen ? "translate-x-0" : "-translate-x-full"
+          )}
+        >
+          <button
+            onClick={() => setMobileOpen(false)}
+            className="absolute top-3.5 right-3 p-1.5 rounded-md text-muted-foreground hover:bg-muted transition-colors"
+          >
+            <X className="h-4 w-4" />
+          </button>
+          <SidebarInner
+            schemas={schemas}
+            isLoading={isLoading}
+            location={location}
+            logout={logout}
+            isEmbedded={isEmbedded}
+            collapsed={false}
+            onNavigate={() => setMobileOpen(false)}
+          />
+        </aside>
+
+        <main className="flex-1 min-w-0 overflow-auto flex flex-col relative bg-background/50">
+          {/* Mobile Floating Toggle */}
+          <button
+            onClick={() => setMobileOpen(true)}
+            className="md:hidden fixed bottom-8 right-8 z-50 h-14 w-14 rounded-full bg-gradient-to-br from-primary to-primary/80 text-primary-foreground shadow-[0_8px_30px_rgb(0,0,0,0.3)] flex items-center justify-center transition-all active:scale-90 hover:scale-105 border border-white/20"
+            aria-label="Open menu"
+          >
+            <Menu className="h-6 w-6" />
+          </button>
+
+          <div className="flex-1 py-6 px-4 lg:py-10 lg:px-6">
+            {children}
+          </div>
+        </main>
+      </div>
+    </BrandingProvider>
+  )
+}

package/src/components/layout/branding-provider.tsx

@@ -0,0 +1,112 @@
+import React, { useMemo } from "react";
+import { useDyrected } from "../../providers/dyrected-provider";
+
+/**
+ * Converts a color value (hex, named, or raw HSL string) to the raw HSL
+ * triplet expected by our CSS variables, e.g. "38 92% 50%".
+ */
+function toRawHsl(color: string): string {
+  if (!color) return "38 92% 50%"; // Default amber
+
+  if (color.startsWith("#")) {
+    let r = 0, g = 0, b = 0;
+    if (color.length === 4) {
+      r = parseInt(color[1] + color[1], 16);
+      g = parseInt(color[2] + color[2], 16);
+      b = parseInt(color[3] + color[3], 16);
+    } else if (color.length === 7) {
+      r = parseInt(color.substring(1, 3), 16);
+      g = parseInt(color.substring(3, 5), 16);
+      b = parseInt(color.substring(5, 7), 16);
+    }
+
+    r /= 255; g /= 255; b /= 255;
+    const max = Math.max(r, g, b), min = Math.min(r, g, b);
+    let h = 0, s = 0;
+    const l = (max + min) / 2;
+
+    if (max !== min) {
+      const d = max - min;
+      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+      switch (max) {
+        case r: h = (g - b) / d + (g < b ? 6 : 0); break;
+        case g: h = (b - r) / d + 2; break;
+        case b: h = (r - g) / d + 4; break;
+      }
+      h /= 6;
+    }
+
+    return `${Math.round(h * 360)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%`;
+  }
+
+  const named: Record<string, string> = {
+    amber:  "38 92% 50%",
+    green:  "142 76% 36%",
+    blue:   "217 91% 60%",
+    red:    "0 84% 60%",
+    purple: "262 83% 58%",
+    orange: "24 95% 53%",
+  };
+
+  return named[color.toLowerCase()] || color;
+}
+
+/**
+ * Determines the best foreground color for text rendered on top of a given
+ * primary background. Warm, saturated colours (yellows, ambers) are
+ * perceptually bright even at moderate lightness and need dark text.
+ */
+function primaryForeground(hsl: string): string {
+  const parts = hsl.split(" ");
+  if (parts.length < 3) return "60 3% 6%";
+
+  const hue = parseFloat(parts[0]);
+  const saturation = parseFloat(parts[1]);
+  const lightness = parseFloat(parts[2]);
+
+  // Warm saturated colours (yellow → lime, hue 20–150°) at moderate lightness
+  // are visually bright and need the dark near-black foreground.
+  const isWarmBright =
+    saturation > 50 &&
+    lightness > 38 &&
+    hue >= 20 &&
+    hue <= 150;
+
+  if (isWarmBright) return "60 3% 6%";  // warm near-black
+
+  // Cool dark colours need white text; very pale tints need dark text.
+  return lightness < 55 ? "0 0% 100%" : "60 3% 6%";
+}
+
+export function BrandingProvider({ children }: { children: React.ReactNode }) {
+  const { schemas } = useDyrected();
+  const branding = schemas?.admin?.branding;
+
+  const styleTag = useMemo(() => {
+    const hsl = toRawHsl(branding?.primaryColor || "38 92% 50%");
+    const fg = primaryForeground(hsl);
+
+    return (
+      <style dangerouslySetInnerHTML={{ __html: `
+        .admin-ui {
+          --primary: ${hsl};
+          --primary-foreground: ${fg};
+          --sidebar-primary: ${hsl};
+          --sidebar-primary-foreground: ${fg};
+          --sidebar-accent-foreground: ${hsl};
+          --sidebar-ring: ${hsl};
+          --ring: ${hsl} / 0.15;
+          ${branding?.fontSans ? `--font-sans: ${branding.fontSans};` : ""}
+          ${branding?.fontSerif ? `--font-serif: ${branding.fontSerif};` : ""}
+        }
+      `}} />
+    );
+  }, [branding?.primaryColor, branding?.fontSans, branding?.fontSerif]);
+
+  return (
+    <>
+      {styleTag}
+      {children}
+    </>
+  );
+}