create-nextblock 0.0.1

package/templates/nextblock-template/app/cms/media/components/FolderNavigator.tsx

@@ -0,0 +1,273 @@
+"use client";
+
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { Button, Badge, Input } from "@nextblock-cms/ui";
+import { Folder as FolderIcon, Search as SearchIcon, ChevronLeft, ChevronRight } from "lucide-react";
+
+interface FolderNavigatorProps {
+  folders: string[];
+  basePath: string;
+  selectedFolder?: string;
+  selectedPrefix?: string;
+  counts?: Record<string, number>;
+  searchTerm?: string;
+}
+
+export default function FolderNavigator({ folders, basePath, selectedFolder, selectedPrefix, counts = {}, searchTerm = "" }: FolderNavigatorProps) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  // Build top-level groups and counts
+  const groups = useMemo(() => {
+    const map = new Map<string, Set<string>>();
+    folders.forEach((f) => {
+      const parts = f.replace(/^\/+/, "").split("/").filter(Boolean);
+      const top = (parts[0] || "").toLowerCase();
+      const child = parts.length >= 2 ? `${top}/${parts[1]}/` : `${top}/`;
+      let set = map.get(top);
+      if (!set) {
+        set = new Set<string>();
+        map.set(top, set);
+      }
+      set.add(child);
+    });
+    return Array.from(map.entries())
+      .map(([name, children]) => ({ name, count: children.size }))
+      .sort((a, b) => a.name.localeCompare(b.name));
+  }, [folders]);
+
+  const lastPushedRef = useRef<string | null>(null);
+
+  const apply = (params: { folder?: string | null; folderPrefix?: string | null }, clearSearch?: boolean) => {
+    const current = new URLSearchParams(Array.from(searchParams.entries()));
+    if (params.folder !== undefined) {
+      if (params.folder) current.set("folder", params.folder); else current.delete("folder");
+    }
+    if (params.folderPrefix !== undefined) {
+      if (params.folderPrefix) current.set("folderPrefix", params.folderPrefix); else current.delete("folderPrefix");
+    }
+    if (clearSearch) {
+      current.delete('q');
+      if (query) setQuery("");
+    }
+    const nextUrl = `${basePath}${current.toString() ? `?${current.toString()}` : ""}`;
+    const currentUrl = `${basePath}${searchParams.toString() ? `?${searchParams.toString()}` : ""}`;
+    if (nextUrl === currentUrl || nextUrl === lastPushedRef.current) return;
+    lastPushedRef.current = nextUrl;
+    router.push(nextUrl);
+  };
+
+  const activeGroup = useMemo(() => {
+    const firstSeg = (p: string) => p.replace(/^\/+/, '').split('/').filter(Boolean)[0] || '';
+    if (selectedPrefix) return firstSeg(selectedPrefix);
+    if (selectedFolder) return firstSeg(selectedFolder);
+    return '';
+  }, [selectedPrefix, selectedFolder]);
+
+  const topTabs = ["logos", "pages", "posts", "uploads"].filter((t) => groups.find((g) => g.name === t));
+
+  const getImmediateChildren = (basePrefix: string): string[] => {
+    if (!basePrefix) return [];
+    const base = basePrefix.replace(/^\/+/, "");
+    const set = new Set<string>();
+    folders.forEach((f) => {
+      const norm = f.replace(/^\/+/, "");
+      if (!norm.startsWith(base)) return;
+      const rest = norm.slice(base.length);
+      if (!rest) return;
+      const seg = rest.split("/").filter(Boolean)[0];
+      if (!seg) return;
+      set.add(`${base}${seg}/`);
+    });
+    return Array.from(set).sort((a, b) => a.localeCompare(b));
+  };
+
+  // Build all level prefixes from the selected prefix to render rows recursively
+  const levelPrefixes = useMemo(() => {
+    const arr: string[] = [];
+    if (!activeGroup) return arr;
+    const top = `${activeGroup}/`;
+    arr.push(top);
+    const current = (selectedPrefix || selectedFolder || '').replace(/^\/+/, '');
+    if (current && current.startsWith(top)) {
+      const parts = current.replace(/\/$/, '').split('/').filter(Boolean);
+      // parts includes activeGroup as first element; start after it
+      for (let i = 1; i < parts.length; i++) {
+        const prefix = `${activeGroup}/${parts.slice(1, i + 1).join('/')}/`;
+        arr.push(prefix);
+      }
+    }
+    return arr;
+  }, [activeGroup, selectedPrefix, selectedFolder]);
+
+  // --- Search as filter: update query param 'q' to filter server results ---
+  const [query, setQuery] = useState(searchTerm);
+  useEffect(() => setQuery(searchTerm), [searchTerm]);
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      const current = new URLSearchParams(Array.from(searchParams.entries()));
+      const term = query.trim();
+      if (term) {
+        // Auto-select best matching folder path when searching folders
+        // Heuristic scoring so partial matches on the last segment still work well.
+        const t = term.toLowerCase();
+        const minLen = 2; // avoid over-eager matching for 1-char inputs
+        const candidates = folders.filter((f) => f.toLowerCase().includes(t));
+
+        // Compute a score for each candidate
+        let best: { key: string; score: number } | null = null;
+        for (const f of candidates) {
+          const full = f.toLowerCase();
+          const last = f.replace(/\/$/, '').split('/').filter(Boolean).pop()?.toLowerCase() ?? '';
+          let score = 0;
+          if (last === t) score = 100; // exact last segment
+          else if (last.startsWith(t)) score = 85;
+          else if (last.includes(t)) score = 70;
+          else if (full.includes(t)) score = 50;
+          // shorter last segment gets a small boost (more likely precise)
+          score -= Math.min(last.length, 20) * 0.2;
+          if (!best || score > best.score) best = { key: f, score };
+        }
+
+        // If a strong folder match is found (score threshold) and term length is reasonable,
+        // auto-select that folder and clear q so files in it are visible.
+        if (best && best.score >= 50 && t.length >= minLen) {
+          const norm = best.key.endsWith('/') ? best.key : `${best.key}/`;
+          current.set('folderPrefix', norm);
+          current.delete('folder');
+          current.delete('q');
+        } else {
+          // Otherwise treat the term as a content filter for files only
+          current.set('q', term);
+        }
+      } else {
+        current.delete('q');
+      }
+      const nextUrl = `${basePath}${current.toString() ? `?${current.toString()}` : ''}`;
+      const currentUrl = `${basePath}${searchParams.toString() ? `?${searchParams.toString()}` : ''}`;
+      if (nextUrl === currentUrl || nextUrl === lastPushedRef.current) return;
+      lastPushedRef.current = nextUrl;
+      router.push(nextUrl);
+    }, 300);
+    return () => clearTimeout(handler);
+  }, [query, router, basePath, folders, searchParams]);
+
+  // Compute prefixes/rows to render
+
+  const prefixesToRender = useMemo(() => {
+    if (activeGroup) return levelPrefixes;
+    // When "All" is selected, do not render any subfolder rows
+    return [] as string[];
+  }, [activeGroup, levelPrefixes]);
+
+  // RowScroller: keep a row on one line with arrows + drag scroll
+  const RowScroller: React.FC<{ children: React.ReactNode; ariaLabel?: string }> = ({ children, ariaLabel }) => {
+    const ref = useRef<HTMLDivElement>(null);
+    const [canLeft, setCanLeft] = useState(false);
+    const [canRight, setCanRight] = useState(false);
+    const isDown = useRef(false);
+    const startX = useRef(0);
+    const startScroll = useRef(0);
+
+    const refresh = () => {
+      const el = ref.current; if (!el) return;
+      setCanLeft(el.scrollLeft > 0);
+      setCanRight(el.scrollLeft < el.scrollWidth - el.clientWidth - 1);
+    };
+    useEffect(() => { refresh(); const onResize = () => refresh(); window.addEventListener('resize', onResize); return () => window.removeEventListener('resize', onResize); }, []);
+
+    const onMD = (e: React.MouseEvent) => { const el = ref.current; if (!el) return; isDown.current = true; startX.current = e.pageX; startScroll.current = el.scrollLeft; el.style.cursor = 'grabbing'; };
+    const onMM = (e: React.MouseEvent) => { const el = ref.current; if (!el || !isDown.current) return; el.scrollLeft = startScroll.current - (e.pageX - startX.current); refresh(); };
+    const onMU = () => { const el = ref.current; if (!el) return; isDown.current = false; el.style.cursor = ''; };
+    const scrollBy = (dx: number) => { const el = ref.current; if (!el) return; el.scrollBy({ left: dx, behavior: 'smooth' }); setTimeout(refresh, 200); };
+
+    return (
+      <div className="relative w-full max-w-full overflow-x-hidden">
+        {canLeft && (
+          <div className="absolute inset-y-0 left-0 flex items-center pl-1 z-10">
+            <Button size="icon" variant="outline" onClick={() => scrollBy(-260)} aria-label="Scroll left"><ChevronLeft className="h-4 w-4" /></Button>
+          </div>
+        )}
+        {canRight && (
+          <div className="absolute inset-y-0 right-0 flex items-center pr-1 z-10">
+            <Button size="icon" variant="outline" onClick={() => scrollBy(260)} aria-label="Scroll right"><ChevronRight className="h-4 w-4" /></Button>
+          </div>
+        )}
+        <div
+          ref={ref}
+          aria-label={ariaLabel}
+          className={`overflow-hidden w-full ${canLeft ? 'pl-16' : ''} ${canRight ? 'pr-12' : 'pr-4'}`}
+          onMouseDown={onMD}
+          onMouseMove={onMM}
+          onMouseUp={onMU}
+          onMouseLeave={onMU}
+          onScroll={refresh}
+        >
+          <div className="flex gap-2 items-center py-1 whitespace-nowrap">
+            {children}
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div className="flex flex-col gap-3">
+      {/* Top-level tabs + search */}
+      <div className="flex items-center gap-2 justify-between">
+        <div className="flex-1 min-w-0">
+          <RowScroller ariaLabel="Top folders">
+            <Button size="sm" variant={!selectedFolder && !selectedPrefix ? "default" : "outline"} onClick={() => apply({ folder: null, folderPrefix: null })}>
+              All
+            </Button>
+            {topTabs.map((t) => {
+              const isActive = selectedPrefix === `${t}/` || (!!selectedFolder && selectedFolder.startsWith(`${t}/`));
+              const count = counts[`${t}/`] ?? 0;
+              return (
+                <Button key={t} size="sm" variant={isActive ? "default" : "outline"} onClick={() => apply({ folder: null, folderPrefix: `${t}/` }, true)} className="flex items-center gap-1">
+                  <FolderIcon className="h-3.5 w-3.5" aria-hidden />
+                  <span className="capitalize">{t}</span>
+                  <Badge variant={isActive ? "secondary" : "outline"} className="ml-1 px-1.5 py-1 text-[10px] leading-none">{count}</Badge>
+                </Button>
+              );
+            })}
+          </RowScroller>
+        </div>
+        <div className="relative min-w-[260px]">
+          <SearchIcon className="h-4 w-4 absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground" />
+          <Input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Filter files and folders..." className="pl-8 h-9" />
+        </div>
+      </div>
+
+      {/* Recursive rows: for each level prefix, render base + its children */}
+      {prefixesToRender.map((prefix) => {
+        const children = getImmediateChildren(prefix);
+        if (children.length === 0) return null;
+        const baseLabel = prefix.replace(/\/$/, '').split('/').pop();
+        const isBaseActive = selectedPrefix === prefix;
+        return (
+          <RowScroller key={`row-${prefix}`} ariaLabel={`Folders under ${baseLabel}`}>
+            <Button size="sm" variant={isBaseActive ? "default" : "outline"} onClick={() => apply({ folder: null, folderPrefix: prefix }, true)} className="flex items-center gap-1">
+              <FolderIcon className="h-3.5 w-3.5" aria-hidden />
+              <span className="capitalize">{baseLabel}</span>
+              <Badge variant={isBaseActive ? "secondary" : "outline"} className="ml-1 px-1.5 py-1 text-[10px] leading-none">{counts[prefix] ?? 0}</Badge>
+            </Button>
+            {children.map((child) => {
+              const label = child.replace(/\/$/, '').split('/').pop();
+              const isSel = (selectedPrefix === child || selectedFolder === child);
+              const c = counts[child] ?? 0;
+              return (
+                <Button key={child} size="sm" variant={isSel ? "default" : "outline"} onClick={() => apply({ folder: null, folderPrefix: child }, true)} className="flex items-center gap-1" title={child}>
+                  <FolderIcon className="h-3.5 w-3.5" aria-hidden />
+                  {label}
+                  <Badge variant={isSel ? "secondary" : "outline"} className="ml-1 px-1.5 py-1 text-[10px] leading-none">{c}</Badge>
+                </Button>
+              );
+            })}
+          </RowScroller>
+        );
+      })}
+    </div>
+  );
+}

package/templates/nextblock-template/app/cms/media/components/FolderTree.tsx

@@ -0,0 +1,122 @@
+"use client";
+
+import React, { useMemo, useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { Button } from "@nextblock-cms/ui";
+
+interface FolderTreeProps {
+  folders: string[];
+  basePath: string;
+  selectedFolder?: string; // exact folder filter
+  selectedPrefix?: string; // prefix filter (e.g., pages/)
+}
+
+type Group = {
+  name: string; // top-level segment, e.g., 'pages'
+  count: number; // number of folders under this group
+  children: string[]; // immediate subfolders like 'pages/slug/'
+};
+
+export default function FolderTree({ folders, basePath, selectedFolder, selectedPrefix }: FolderTreeProps) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [expanded, setExpanded] = useState<Record<string, boolean>>({});
+
+  const groups = useMemo<Group[]>(() => {
+    const map = new Map<string, Set<string>>();
+    folders.forEach((f) => {
+      const parts = f.replace(/^\/+/, '').split('/').filter(Boolean);
+      const top = parts[0] || '';
+      const childPrefix = parts.length >= 2 ? `${top}/${parts[1]}/` : `${top}/`;
+      if (!map.has(top)) {
+        map.set(top, new Set<string>());
+      }
+      const childSet = map.get(top);
+      if (childSet) {
+        childSet.add(childPrefix);
+      }
+    });
+    return Array.from(map.entries()).map(([name, children]) => ({
+      name,
+      count: children.size,
+      children: Array.from(children).sort((a, b) => a.localeCompare(b)),
+    })).sort((a, b) => a.name.localeCompare(b.name));
+  }, [folders]);
+
+  const apply = (params: Record<string, string | undefined>) => {
+    const current = new URLSearchParams(Array.from(searchParams.entries()));
+    if (params.folder !== undefined) {
+      if (params.folder) current.set('folder', params.folder); else current.delete('folder');
+    }
+    if (params.folderPrefix !== undefined) {
+      if (params.folderPrefix) current.set('folderPrefix', params.folderPrefix); else current.delete('folderPrefix');
+    }
+    const query = current.toString();
+    router.push(`${basePath}${query ? `?${query}` : ''}`);
+  };
+
+  const isPrefixActive = (prefix: string) => selectedPrefix === prefix && !selectedFolder;
+  const isFolderActive = (folder: string) => selectedFolder === folder;
+
+  const topLevel = groups.map((g) => `${g.name}/`);
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="flex flex-wrap gap-2">
+        <Button size="sm" variant={!selectedFolder && !selectedPrefix ? 'default' : 'outline'} onClick={() => apply({ folder: undefined, folderPrefix: undefined })}>All</Button>
+        {topLevel.map((prefix) => (
+          <Button
+            key={prefix}
+            size="sm"
+            variant={isPrefixActive(prefix) ? 'default' : 'outline'}
+            onClick={() => apply({ folder: undefined, folderPrefix: prefix })}
+            title={`${prefix}*`}
+          >
+            {prefix}*
+          </Button>
+        ))}
+      </div>
+
+      {/* Collapsible children (first N by default) */}
+      {groups.map((g) => {
+        const prefix = `${g.name}/`;
+        const open = !!expanded[prefix];
+        const children = g.children;
+        const limit = 10;
+        const visible = open ? children : children.slice(0, limit);
+        return (
+          <div key={g.name} className="border rounded-md p-2">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <span className="text-sm font-medium">{prefix}</span>
+                <span className="text-xs text-muted-foreground">{g.count} subfolder(s)</span>
+              </div>
+              {g.count > limit && (
+                <Button size="sm" variant="outline" onClick={() => setExpanded((e) => ({ ...e, [prefix]: !open }))}>
+                  {open ? 'Show less' : `Show all ${g.count}`}
+                </Button>
+              )}
+            </div>
+            <div className="mt-2 flex flex-wrap gap-2">
+              {visible.map((child) => (
+                <Button
+                  key={child}
+                  size="sm"
+                  variant={isFolderActive(child) ? 'default' : 'outline'}
+                  onClick={() => apply({ folder: child, folderPrefix: undefined })}
+                  title={child}
+                >
+                  {child}
+                </Button>
+              ))}
+              {visible.length === 0 && (
+                <span className="text-xs text-muted-foreground">No subfolders yet</span>
+              )}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+

package/templates/nextblock-template/app/cms/media/components/MediaEditForm.tsx

@@ -0,0 +1,157 @@
+// app/cms/media/components/MediaEditForm.tsx
+"use client";
+
+import React, { useState, useTransition, useEffect } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import Image from 'next/image';
+import { Button } from '@nextblock-cms/ui';
+import { Input } from '@nextblock-cms/ui';
+import { Label } from '@nextblock-cms/ui';
+import { Textarea } from '@nextblock-cms/ui';
+import type { Database } from '@nextblock-cms/db';
+import { useAuth } from '@/context/AuthContext';
+
+type Media = Database['public']['Tables']['media']['Row'];
+import { FileText } from 'lucide-react';
+
+interface MediaEditFormProps {
+  mediaItem: Media;
+  // The formAction will be updateMediaItem bound with the mediaItem.id
+  formAction: (formData: FormData) => Promise<{ error?: string; success?: boolean; media?: Media } | void>;
+}
+
+const R2_BASE_URL = process.env.NEXT_PUBLIC_R2_BASE_URL || "";
+
+export default function MediaEditForm({ mediaItem, formAction }: MediaEditFormProps) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [isPending, startTransition] = useTransition();
+  const { user, isLoading: authLoading, isAdmin, isWriter } = useAuth();
+
+  const [fileName, setFileName] = useState(mediaItem.file_name);
+  const [description, setDescription] = useState(mediaItem.description || "");
+  const [formMessage, setFormMessage] = useState<{ type: 'success' | 'error', text: string } | null>(null);
+
+  useEffect(() => {
+    const successMessage = searchParams.get('success');
+    const errorMessage = searchParams.get('error');
+    if (successMessage) {
+      setFormMessage({ type: 'success', text: successMessage });
+    } else if (errorMessage) {
+      setFormMessage({ type: 'error', text: errorMessage });
+    }
+  }, [searchParams]);
+
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setFormMessage(null);
+    const formData = new FormData(event.currentTarget);
+    // Ensure current values are on the formData if not explicitly set by controlled inputs
+    formData.set('file_name', fileName);
+    formData.set('description', description);
+
+
+    startTransition(async () => {
+      const result = await formAction(formData);
+      if (result?.error) {
+        setFormMessage({ type: 'error', text: result.error });
+      } else if (result?.success) {
+        setFormMessage({ type: 'success', text: "Media item updated successfully!" });
+        // Optionally, update local state if the server returns the updated media item
+        if (result.media) {
+            setFileName(result.media.file_name);
+            setDescription(result.media.description || "");
+        }
+        router.refresh(); // Refresh server components on the page
+      }
+    });
+  };
+
+  if (authLoading) {
+    return <div>Loading form...</div>;
+  }
+  if (!user || (!isAdmin && !isWriter)) {
+    return <div>Access Denied. You do not have permission to edit media.</div>;
+  }
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+      <div className="md:col-span-1 space-y-4">
+        <h2 className="text-lg font-semibold">Media Preview</h2>
+        {mediaItem.file_type?.startsWith("image/") ? (
+          <Image
+            src={`${R2_BASE_URL}/${mediaItem.object_key}`}
+            alt={description || fileName}
+            width={400}
+            height={400}
+            className="rounded-lg border object-contain aspect-square w-full max-w-sm mx-auto"
+          />
+        ) : (
+          <div className="aspect-square w-full max-w-sm mx-auto bg-muted rounded-lg flex flex-col items-center justify-center p-4 text-center">
+            <FileText className="h-16 w-16 text-muted-foreground mb-2" /> {/* Using FileText as a generic icon */}
+            <p className="text-sm text-muted-foreground">No preview available for this file type.</p>
+            <p className="text-xs text-muted-foreground mt-1">({mediaItem.file_type})</p>
+          </div>
+        )}
+        <div className="text-xs text-muted-foreground space-y-1">
+            <p><strong>Object Key:</strong> <span className="font-mono break-all">{mediaItem.object_key}</span></p>
+            <p><strong>File Type:</strong> {mediaItem.file_type}</p>
+            <p><strong>Size:</strong> {typeof mediaItem.size_bytes === 'number' ? (mediaItem.size_bytes / 1024 / 1024).toFixed(2) + ' MB' : 'Unknown'}</p>
+            <p><strong>Uploaded:</strong> {new Date(mediaItem.created_at).toLocaleString()}</p>
+        </div>
+      </div>
+
+      <form onSubmit={handleSubmit} className="md:col-span-2 space-y-6">
+        {formMessage && (
+          <div
+            className={`p-3 rounded-md text-sm ${
+              formMessage.type === 'success'
+                ? 'bg-green-100 text-green-700 border border-green-200'
+                : 'bg-red-100 text-red-700 border border-red-200'
+            }`}
+          >
+            {formMessage.text}
+          </div>
+        )}
+        <div>
+          <Label htmlFor="file_name">Display Name</Label>
+          <Input
+            id="file_name"
+            name="file_name"
+            value={fileName}
+            onChange={(e) => setFileName(e.target.value)}
+            required
+            className="mt-1"
+          />
+        </div>
+
+        <div>
+          <Label htmlFor="description">Description (Alt Text for Images)</Label>
+          <Textarea
+            id="description"
+            name="description"
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            className="mt-1"
+            rows={4}
+            placeholder="e.g., A vibrant sunset over a mountain range"
+          />
+        </div>
+
+        <div className="flex justify-end space-x-3 pt-4">
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => router.push("/cms/media")}
+            disabled={isPending}
+          >
+            Cancel
+          </Button>
+          <Button type="submit" disabled={isPending || authLoading}>
+            {isPending ? "Saving..." : "Update Media Info"}
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+}