betterstart-cli 0.0.1

package/dist/assets/adapters/next/templates/init/components/shared/media/media-grid.tsx

@@ -0,0 +1,44 @@
+'use client'
+
+import type { AdminMedia } from '@admin/types'
+import { cn } from '@admin/utils/shared/cn'
+import type * as React from 'react'
+import { MediaGridItem } from './media-grid-item'
+
+interface MediaGridProps extends React.ComponentPropsWithRef<'div'> {
+  items: AdminMedia[]
+  selectedIds: { has(key: string): boolean }
+  isSelectMode?: boolean
+  onItemClick: (item: AdminMedia) => void
+}
+
+export function MediaGrid({
+  items,
+  selectedIds,
+  onItemClick,
+  isSelectMode,
+  className
+}: MediaGridProps) {
+  return (
+    <div
+      className={cn(
+        'grid min-h-0 w-full flex-1 auto-rows-max grid-cols-6 content-start items-start gap-3 overflow-auto',
+        className
+      )}
+    >
+      {items.map((item) => {
+        const isSelected = selectedIds.has(item.id)
+
+        return (
+          <MediaGridItem
+            isSelectMode={isSelectMode}
+            key={item.id}
+            item={item}
+            selected={isSelectMode && isSelected}
+            onClick={onItemClick}
+          />
+        )
+      })}
+    </div>
+  )
+}

package/dist/assets/adapters/next/templates/init/components/shared/media/media-preview.tsx

@@ -0,0 +1,69 @@
+'use client'
+
+import { useFailedImageUrl } from '@admin/hooks/use-failed-image-url'
+import type { AdminMedia } from '@admin/types'
+import { cn } from '@admin/utils/shared/cn'
+import { FileText, Film, ImageOff } from 'lucide-react'
+import Image from 'next/image'
+
+interface MediaPreviewProps {
+  media: AdminMedia
+  isFilled?: boolean
+  showMetadata?: boolean
+}
+
+export function MediaPreview({ media, isFilled = false, showMetadata = false }: MediaPreviewProps) {
+  const { hasImageFailed, markImageFailed } = useFailedImageUrl(media.url)
+
+  if (media.contentType.startsWith('image/') && !hasImageFailed) {
+    return (
+      <div className="flex size-full flex-col items-center justify-center overflow-hidden relative">
+        <Image
+          src={media.url}
+          alt={media.alt || media.filename}
+          className={cn({
+            'object-cover': isFilled,
+            'object-contain': !isFilled
+          })}
+          fill
+          sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 200px"
+          loading="lazy"
+          decoding="async"
+          draggable={false}
+          onError={markImageFailed}
+        />
+
+        {showMetadata && (
+          <div className="pointer-events-none absolute inset-x-0 bottom-0 z-10 flex w-full items-center bg-[linear-gradient(to_top,color-mix(in_oklab,var(--primary)_86%,transparent)_0%,color-mix(in_oklab,var(--primary)_52%,transparent)_48%,transparent_100%)] px-3 py-2 text-left text-xs font-medium justify-between text-white gap-4">
+            <p className="truncate">{media.filename}</p>
+            <p className="shrink-0">
+              {media.contentType} &middot; {(media.size / 1024).toFixed(1)} KB
+            </p>
+          </div>
+        )}
+      </div>
+    )
+  }
+
+  if (media.contentType.startsWith('image/')) {
+    return (
+      <div className="flex size-full items-center justify-center bg-background border border-border/80 text-muted-foreground/30">
+        <ImageOff strokeWidth={1} className="size-12" />
+      </div>
+    )
+  }
+
+  if (media.contentType.startsWith('video/')) {
+    return (
+      <div className="flex size-full items-center justify-center">
+        <Film className="size-12 text-foreground" />
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex size-full items-center justify-center">
+      <FileText className="size-12 text-foreground" />
+    </div>
+  )
+}

package/dist/assets/adapters/next/templates/init/components/shared/media/media-url-importer.tsx

@@ -0,0 +1,139 @@
+'use client'
+
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput
+} from '@admin/components/ui/input-group'
+import type { UploadFileResult } from '@admin/types'
+import { getMediaUrlHelpText, getMediaUrlPlaceholder } from '@admin/utils/media/media'
+import { cn } from '@admin/utils/shared/cn'
+import { isValidUrl } from '@admin/utils/validation/validation'
+import { LoaderCircle, Upload } from 'lucide-react'
+import * as React from 'react'
+
+interface MediaUrlImporterProps extends React.HTMLAttributes<HTMLDivElement> {
+  onImportFromUrl: (url: string) => Promise<UploadFileResult>
+  accept?: string
+}
+
+export function MediaUrlImporter({ onImportFromUrl, accept, className }: MediaUrlImporterProps) {
+  const [urlValue, setUrlValue] = React.useState('')
+  const [urlError, setUrlError] = React.useState<string | null>(null)
+  const [isImporting, startImportTransition] = React.useTransition()
+  const mountedRef = React.useRef(true)
+  const importInFlightRef = React.useRef(false)
+  const importRequestIdRef = React.useRef(0)
+
+  React.useEffect(() => {
+    mountedRef.current = true
+
+    return () => {
+      mountedRef.current = false
+      importInFlightRef.current = false
+      importRequestIdRef.current += 1
+    }
+  }, [])
+
+  const urlHelpText = getMediaUrlHelpText(accept)
+  const urlPlaceholder = getMediaUrlPlaceholder(accept)
+
+  const handleImport = React.useCallback(() => {
+    if (isImporting || importInFlightRef.current) return
+
+    const nextUrl = urlValue.trim()
+
+    if (!nextUrl) {
+      setUrlError('Enter a direct media URL to import.')
+      return
+    }
+
+    if (!isValidUrl(nextUrl)) {
+      setUrlError('Enter a valid HTTP or HTTPS URL.')
+      return
+    }
+
+    setUrlError(null)
+    const importRequestId = importRequestIdRef.current + 1
+    importRequestIdRef.current = importRequestId
+    importInFlightRef.current = true
+
+    startImportTransition(async () => {
+      try {
+        const result = await onImportFromUrl(nextUrl)
+
+        if (!mountedRef.current || importRequestIdRef.current !== importRequestId) {
+          return
+        }
+
+        if (!result.success) {
+          setUrlError(result.error ?? 'Failed to import media from URL.')
+          return
+        }
+
+        setUrlValue('')
+      } catch (error) {
+        if (!mountedRef.current || importRequestIdRef.current !== importRequestId) {
+          return
+        }
+
+        setUrlError(error instanceof Error ? error.message : 'Failed to import media from URL.')
+      } finally {
+        if (importRequestIdRef.current === importRequestId) {
+          importInFlightRef.current = false
+        }
+      }
+    })
+  }, [isImporting, onImportFromUrl, urlValue])
+
+  return (
+    <div
+      className={cn(
+        'flex items-center justify-center transition-colors rounded-lg border bg-input border-border overflow-hidden h-full flex-col p-5 gap-5',
+        className
+      )}
+    >
+      <div className="flex w-full flex-col items-center gap-0.5 text-center">
+        <p className="text-sm font-medium">Import from URL</p>
+        <p className="text-sm text-muted-foreground">{urlHelpText}</p>
+      </div>
+
+      <InputGroup className="bg-background mx-auto max-w-2xl">
+        <InputGroupInput
+          type="url"
+          name="url"
+          aria-label="Media URL"
+          value={urlValue}
+          placeholder={urlPlaceholder}
+          autoComplete="off"
+          spellCheck={false}
+          onChange={(event) => {
+            setUrlValue(event.target.value)
+            if (urlError) setUrlError(null)
+          }}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter') {
+              event.preventDefault()
+              void handleImport()
+            }
+          }}
+          disabled={isImporting}
+        />
+
+        <InputGroupAddon align="inline-end">
+          <InputGroupButton
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={() => void handleImport()}
+            disabled={isImporting}
+          >
+            {isImporting ? <LoaderCircle className="animate-spin" /> : <Upload />}
+            Import
+          </InputGroupButton>
+        </InputGroupAddon>
+      </InputGroup>
+    </div>
+  )
+}

package/dist/assets/adapters/next/templates/init/components/shared/page-header.tsx

@@ -0,0 +1,46 @@
+'use client'
+
+import { Button } from '@admin/components/ui/button'
+import { ChevronLeft } from 'lucide-react'
+import { useRouter } from 'next/navigation'
+
+interface PageHeaderProps {
+  title: string
+  children?: React.ReactNode
+  search?: React.ReactNode
+  actions?: React.ReactNode
+  hasBackButton?: boolean
+}
+
+export function PageHeader({
+  title,
+  children,
+  search,
+  actions,
+  hasBackButton = true
+}: PageHeaderProps) {
+  const router = useRouter()
+
+  return (
+    <>
+      <header className="fixed top-0 border-t right-0 left-(--admin-shell-content-left) z-20 grid h-14 grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center border-b border-border/80 px-4 bg-sidebar transition-[left] duration-200 ease-linear">
+        <div className="flex w-full items-center justify-start gap-2">
+          {hasBackButton && (
+            <Button variant="ghost" size="icon" onClick={() => router.back()}>
+              <ChevronLeft className="size-4" />
+            </Button>
+          )}
+        </div>
+        <div className="flex min-w-0 items-center justify-center gap-2">
+          <h2 className="truncate text-sm font-medium tracking-tight">{title}</h2>
+        </div>
+        <div className="flex w-full min-w-0 items-center justify-end gap-2">
+          {children && children}
+          {search && search}
+          {actions && actions}
+        </div>
+      </header>
+      <div className="h-14 shrink-0" aria-hidden="true" />
+    </>
+  )
+}

package/dist/assets/adapters/next/templates/init/components/shared/search-input.tsx

@@ -0,0 +1,88 @@
+'use client'
+
+import { Button } from '@admin/components/ui/button'
+import { Form, FormControl, FormField, FormItem } from '@admin/components/ui/form'
+import { Input } from '@admin/components/ui/input'
+import { CornerDownLeft, Search, X } from 'lucide-react'
+import * as React from 'react'
+import { useForm } from 'react-hook-form'
+
+interface SearchInputProps {
+  value?: string
+  placeholder?: string
+  isPending?: boolean
+  onSearch: (value: string | null) => void
+}
+
+interface SearchFormValues {
+  search: string
+}
+
+export function SearchInput({
+  value,
+  placeholder = 'Search...',
+  isPending,
+  onSearch
+}: SearchInputProps) {
+  const searchFormValues = React.useMemo(() => ({ search: value ?? '' }), [value])
+  const form = useForm<SearchFormValues>({
+    defaultValues: searchFormValues,
+    values: searchFormValues
+  })
+
+  const onSubmit = React.useCallback(
+    (data: SearchFormValues) => {
+      const trimmed = data.search.trim()
+      onSearch(trimmed || null)
+    },
+    [onSearch]
+  )
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="flex items-center w-full">
+        <FormField
+          control={form.control}
+          name="search"
+          render={({ field }) => (
+            <FormItem className="w-full">
+              <div className="relative w-full">
+                <Search className="text-foreground pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2" />
+                <FormControl>
+                  <Input {...field} placeholder={placeholder} className="pl-9 w-full" />
+                </FormControl>
+
+                {value ? (
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon-sm"
+                    disabled={isPending}
+                    onClick={() => {
+                      form.reset({ search: '' })
+                      onSearch(null)
+                    }}
+                    aria-label="Clear search"
+                    className="absolute right-2 top-1/2 -translate-y-1/2 text-foreground size-7"
+                  >
+                    <X className="size-4" />
+                  </Button>
+                ) : (
+                  <Button
+                    type="submit"
+                    variant="ghost"
+                    size="icon-sm"
+                    className="absolute right-2 top-1/2 -translate-y-1/2 text-foreground size-7"
+                    disabled={isPending}
+                  >
+                    <CornerDownLeft className="size-4" />
+                  </Button>
+                )}
+              </div>
+            </FormItem>
+          )}
+        />
+      </form>
+    </Form>
+  )
+}

package/dist/assets/adapters/next/templates/init/components/shared/sort-indicator.tsx

@@ -0,0 +1,24 @@
+'use client'
+
+import { cn } from '@admin/utils/shared/cn'
+import { ArrowDownUp, ArrowUpDown } from 'lucide-react'
+
+export function SortIndicator({ direction }: { direction: false | 'asc' | 'desc' }) {
+  const nextDirection = direction === 'asc' ? 'desc' : 'asc'
+  const Icon =
+    direction === 'asc'
+      ? ArrowDownUp
+      : direction === 'desc'
+        ? ArrowUpDown
+        : nextDirection === 'asc'
+          ? ArrowDownUp
+          : ArrowUpDown
+
+  return (
+    <Icon
+      className={cn('size-4 text-muted-foreground shrink-0 opacity-50 group-hover:opacity-100', {
+        'opacity-100 text-foreground': direction !== false
+      })}
+    />
+  )
+}

package/dist/assets/adapters/next/templates/init/components/shared/sort-order-dialog.tsx

@@ -0,0 +1,242 @@
+'use client'
+
+import { Button } from '@admin/components/ui/button'
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle
+} from '@admin/components/ui/drawer'
+import { ScrollArea } from '@admin/components/ui/scroll-area'
+import {
+  closestCenter,
+  DndContext,
+  type DragEndEvent,
+  DragOverlay,
+  type DragStartEvent,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors
+} from '@dnd-kit/core'
+import {
+  SortableContext,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy
+} from '@dnd-kit/sortable'
+import { useInfiniteQuery, useQueryClient } from '@tanstack/react-query'
+import { LoaderCircle } from 'lucide-react'
+import * as React from 'react'
+import { toast } from 'sonner'
+import { DragOverlayItem } from './sort-order-drag-overlay-item'
+import { SortableItem } from './sort-order-item'
+import type { SortOrderItem, SortOrderPage } from './sort-order-types'
+
+const PAGE_SIZE = 50
+
+interface SortOrderDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  queryKey: string[]
+  fetchPage: (offset: number, limit: number) => Promise<SortOrderPage>
+  onSave: (
+    updates: { id: string; sortOrder: number }[]
+  ) => Promise<{ success: boolean; error?: string }>
+  title?: string
+  description?: string
+}
+
+export function SortOrderDialog({
+  open,
+  onOpenChange,
+  queryKey,
+  fetchPage,
+  onSave,
+  title = 'Rearrange Items',
+  description
+}: SortOrderDialogProps) {
+  const queryClient = useQueryClient()
+  const [localItems, setLocalItems] = React.useState<SortOrderItem[]>([])
+  const [hasChanges, setHasChanges] = React.useState(false)
+  const [isSaving, startSaveTransition] = React.useTransition()
+  const [activeId, setActiveId] = React.useState<string | null>(null)
+  const sentinelRef = React.useRef<HTMLDivElement>(null)
+
+  const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } = useInfiniteQuery({
+    queryKey: ['sort-order', ...queryKey],
+    queryFn: ({ pageParam = 0 }) => fetchPage(pageParam as number, PAGE_SIZE),
+    initialPageParam: 0,
+    getNextPageParam: (_lastPage, allPages) => {
+      const loaded = allPages.reduce((sum, page) => sum + page.items.length, 0)
+      const total = allPages[0]?.total ?? 0
+      return loaded < total ? loaded : undefined
+    },
+    enabled: open
+  })
+
+  const serverItems = React.useMemo(() => data?.pages.flatMap((p) => p.items) ?? [], [data])
+  const orderedItems = React.useMemo(() => {
+    if (!hasChanges) {
+      return serverItems
+    }
+
+    const existingIds = new Set(localItems.map((item) => item.id))
+    const newItems = serverItems.filter((item) => !existingIds.has(item.id))
+    return newItems.length > 0 ? [...localItems, ...newItems] : localItems
+  }, [hasChanges, localItems, serverItems])
+
+  const resetLocalState = React.useCallback(() => {
+    setLocalItems([])
+    setHasChanges(false)
+    setActiveId(null)
+    queryClient.removeQueries({ queryKey: ['sort-order', ...queryKey] })
+  }, [queryClient, queryKey])
+
+  const handleDrawerAnimationEnd = React.useCallback(
+    (nextOpen: boolean) => {
+      if (!nextOpen) {
+        resetLocalState()
+      }
+    },
+    [resetLocalState]
+  )
+
+  React.useEffect(() => {
+    const sentinel = sentinelRef.current
+    if (!open || !sentinel || !hasNextPage || isFetchingNextPage) return
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry?.isIntersecting) {
+          fetchNextPage()
+        }
+      },
+      { threshold: 0.1 }
+    )
+    observer.observe(sentinel)
+
+    return () => observer.disconnect()
+  }, [open, hasNextPage, isFetchingNextPage, fetchNextPage])
+
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates
+    })
+  )
+
+  const handleDragStart = React.useCallback((event: DragStartEvent) => {
+    setActiveId(String(event.active.id))
+  }, [])
+
+  const handleDragEnd = React.useCallback(
+    (event: DragEndEvent) => {
+      setActiveId(null)
+      const { active, over } = event
+      if (!over || active.id === over.id) return
+
+      const oldIndex = orderedItems.findIndex((item) => item.id === active.id)
+      const newIndex = orderedItems.findIndex((item) => item.id === over.id)
+      if (oldIndex === -1 || newIndex === -1) return
+
+      const nextItems = [...orderedItems]
+      const [moved] = nextItems.splice(oldIndex, 1)
+      nextItems.splice(newIndex, 0, moved)
+      setLocalItems(nextItems)
+      setHasChanges(true)
+    },
+    [orderedItems]
+  )
+
+  const handleDragCancel = React.useCallback(() => {
+    setActiveId(null)
+  }, [])
+
+  const handleSave = React.useCallback(() => {
+    if (!hasChanges || isSaving) return
+
+    startSaveTransition(async () => {
+      try {
+        const updates = orderedItems.map((item, index) => ({
+          id: item.id,
+          sortOrder: index
+        }))
+        const result = await onSave(updates)
+        if (result.success) {
+          toast.success('Sort order saved')
+          onOpenChange(false)
+        } else {
+          toast.error(result.error || 'Failed to save sort order')
+        }
+      } catch {
+        toast.error('An error occurred while saving')
+      }
+    })
+  }, [hasChanges, isSaving, orderedItems, onSave, onOpenChange])
+
+  const activeItem = activeId != null ? orderedItems.find((i) => i.id === activeId) : null
+
+  return (
+    <DndContext
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      onDragStart={handleDragStart}
+      onDragEnd={handleDragEnd}
+      onDragCancel={handleDragCancel}
+    >
+      <Drawer
+        direction="right"
+        open={open}
+        onOpenChange={onOpenChange}
+        onAnimationEnd={handleDrawerAnimationEnd}
+      >
+        <DrawerContent className="h-full w-full overflow-hidden">
+          <div className="relative z-10 flex min-h-0 flex-1 flex-col overflow-hidden">
+            <DrawerHeader>
+              <DrawerTitle>{title}</DrawerTitle>
+              {description ? <DrawerDescription>{description}</DrawerDescription> : null}
+            </DrawerHeader>
+            {isLoading ? (
+              <div className="flex min-h-0 flex-1 items-center justify-center">
+                <LoaderCircle className="animate-spin" />
+              </div>
+            ) : (
+              <ScrollArea className="min-h-0 flex-1">
+                <div className="flex flex-col gap-1 px-4 py-1">
+                  <SortableContext
+                    items={orderedItems.map((i) => i.id)}
+                    strategy={verticalListSortingStrategy}
+                  >
+                    {orderedItems.map((item) => (
+                      <SortableItem key={item.id} id={item.id} label={item.label} />
+                    ))}
+                  </SortableContext>
+                  {hasNextPage && (
+                    <div ref={sentinelRef} className="flex items-center justify-center py-3">
+                      {isFetchingNextPage && <LoaderCircle className="animate-spin" />}
+                    </div>
+                  )}
+                </div>
+              </ScrollArea>
+            )}
+            <DrawerFooter>
+              <Button onClick={handleSave} disabled={!hasChanges || isSaving} size="lg">
+                {isSaving && <LoaderCircle className="animate-spin" />}
+                {isSaving ? 'Saving...' : 'Save'}
+              </Button>
+              <DrawerClose asChild>
+                <Button variant="outline">Close</Button>
+              </DrawerClose>
+            </DrawerFooter>
+          </div>
+        </DrawerContent>
+      </Drawer>
+      <DragOverlay>{activeItem ? <DragOverlayItem label={activeItem.label} /> : null}</DragOverlay>
+    </DndContext>
+  )
+}
+
+export type { SortOrderItem, SortOrderPage, SortOrderDialogProps }

package/dist/assets/adapters/next/templates/init/components/shared/sort-order-drag-overlay-item.tsx

@@ -0,0 +1,15 @@
+import { Button } from '@admin/components/ui/button'
+import { GripVertical } from 'lucide-react'
+
+export function DragOverlayItem({ label }: { label: string }) {
+  return (
+    <Button
+      type="button"
+      variant="outline"
+      className="shrink-0 w-full justify-start gap-2 px-2 font-normal touch-none cursor-grabbing"
+    >
+      <GripVertical strokeWidth={1} />
+      <span className="truncate text-sm">{label}</span>
+    </Button>
+  )
+}