betterstart-cli 0.0.1

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

@@ -0,0 +1,148 @@
+'use client'
+
+import { deleteMedia } from '@admin/actions/media'
+import { Button } from '@admin/components/ui/button'
+import type { AdminMedia } from '@admin/types'
+import { LoaderCircle, Trash2, TriangleAlert } from 'lucide-react'
+import * as React from 'react'
+import { toast } from 'sonner'
+import { Drawer as DrawerPrimitive } from 'vaul'
+
+interface MediaDeleteDrawerProps {
+  media: AdminMedia
+  container?: HTMLElement | null
+  disabled?: boolean
+  deletePending?: boolean
+  startDeleteTransition?: React.TransitionStartFunction
+  onDeleted: () => void
+}
+
+export function MediaDeleteDrawer({
+  media,
+  container,
+  disabled = false,
+  deletePending,
+  startDeleteTransition,
+  onDeleted
+}: MediaDeleteDrawerProps) {
+  const [open, setOpen] = React.useState(false)
+  const [internalPending, startInternalDeleteTransition] = React.useTransition()
+  const [contentHeight, setContentHeight] = React.useState<number | null>(null)
+  const contentRef = React.useRef<HTMLDivElement | null>(null)
+  const isPending = deletePending ?? internalPending
+  const runDeleteTransition = startDeleteTransition ?? startInternalDeleteTransition
+
+  React.useEffect(() => {
+    if (!open) {
+      return
+    }
+
+    const measuredNode = contentRef.current
+    if (!measuredNode) {
+      return
+    }
+
+    const observedNode: HTMLDivElement = measuredNode
+
+    function updateHeight() {
+      setContentHeight(observedNode.getBoundingClientRect().height)
+    }
+
+    updateHeight()
+
+    const observer = new ResizeObserver(updateHeight)
+    observer.observe(observedNode)
+
+    return () => observer.disconnect()
+  }, [open])
+
+  function handleDelete() {
+    if (isPending) {
+      return
+    }
+
+    runDeleteTransition(async () => {
+      try {
+        const result = await deleteMedia(media.id)
+
+        if (result.success) {
+          toast.success('Media deleted')
+          setOpen(false)
+          onDeleted()
+          return
+        }
+
+        toast.error(result.error ?? 'Failed to delete media')
+      } catch (error) {
+        toast.error(error instanceof Error ? error.message : 'Failed to delete media')
+      }
+    })
+  }
+
+  function handleOpenChange(nextOpen: boolean) {
+    if (isPending && !nextOpen) {
+      return
+    }
+
+    setOpen(nextOpen)
+  }
+
+  return (
+    <DrawerPrimitive.Root
+      container={container}
+      direction="bottom"
+      dismissible={!isPending}
+      open={open}
+      onOpenChange={handleOpenChange}
+    >
+      <DrawerPrimitive.Trigger asChild>
+        <Button variant="destructive" disabled={disabled || isPending || !container}>
+          <Trash2 data-icon="inline-start" />
+          Delete File
+        </Button>
+      </DrawerPrimitive.Trigger>
+      <DrawerPrimitive.Portal>
+        <DrawerPrimitive.Overlay className="pointer-events-auto absolute inset-0 z-20 bg-black/45 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0" />
+        <DrawerPrimitive.Content className="pointer-events-auto absolute inset-x-0 bottom-0 z-30 max-h-[calc(100%-1rem)] overflow-hidden p-3 outline-none">
+          <div
+            className="overflow-hidden rounded-4xl border border-border bg-popover text-sm text-popover-foreground shadow-2xl transition-[height] duration-200 ease-out"
+            style={contentHeight ? { height: contentHeight } : undefined}
+          >
+            <div
+              ref={contentRef}
+              className="max-h-[calc(100vh-8rem)] overflow-y-auto px-4 pb-4 pt-4"
+            >
+              <div aria-hidden="true" className="mx-auto mb-5 h-1.5 w-20 rounded-full bg-muted" />
+              <div className="mb-3 flex size-10 items-center justify-center rounded-full bg-destructive/10 text-foreground">
+                <TriangleAlert className="size-5" />
+              </div>
+              <DrawerPrimitive.Title className="font-heading text-base font-medium text-foreground">
+                Delete this file?
+              </DrawerPrimitive.Title>
+              <DrawerPrimitive.Description className="mt-1 text-sm text-muted-foreground">
+                This removes {media.filename} from the media library. Storage files are not removed.
+              </DrawerPrimitive.Description>
+              <div className="mt-5 grid grid-cols-2 gap-2">
+                <Button
+                  variant="secondary"
+                  onClick={() => handleOpenChange(false)}
+                  disabled={isPending}
+                >
+                  Cancel
+                </Button>
+                <Button
+                  variant="destructive"
+                  onClick={() => void handleDelete()}
+                  disabled={isPending}
+                >
+                  {isPending && <LoaderCircle className="animate-spin" />}
+                  {isPending ? 'Deleting...' : 'Delete'}
+                </Button>
+              </div>
+            </div>
+          </div>
+        </DrawerPrimitive.Content>
+      </DrawerPrimitive.Portal>
+    </DrawerPrimitive.Root>
+  )
+}

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

@@ -0,0 +1,45 @@
+'use client'
+
+import { PlaceholderCard } from '@admin/components/custom/placeholder-card'
+import { Button } from '@admin/components/ui/button'
+import { ImageIcon, LoaderCircle } from 'lucide-react'
+
+interface MediaEmptyStateProps {
+  variant: 'no-results' | 'loading' | 'empty'
+  onClearSearch?: () => void
+}
+
+export function MediaEmptyState({ variant, onClearSearch }: MediaEmptyStateProps) {
+  if (variant === 'loading') {
+    return (
+      <div className="flex h-48 items-center justify-center">
+        <LoaderCircle className="animate-spin" />
+      </div>
+    )
+  }
+
+  if (variant === 'empty') {
+    return (
+      <PlaceholderCard
+        icon={<ImageIcon className="size-10 text-muted-foreground" strokeWidth={1} />}
+        title="No files uploaded yet"
+        description="Upload your first file to get started."
+      />
+    )
+  }
+
+  return (
+    <PlaceholderCard
+      icon={<ImageIcon className="size-10 text-foreground" strokeWidth={1} />}
+      title="No files match your search"
+      description="Try adjusting your search or filters."
+      action={
+        onClearSearch ? (
+          <Button variant="outline" onClick={onClearSearch}>
+            Clear Search
+          </Button>
+        ) : undefined
+      }
+    />
+  )
+}

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

@@ -0,0 +1,129 @@
+'use client'
+
+import { SearchInput } from '@admin/components/shared/search-input'
+import { Button } from '@admin/components/ui/button'
+import { ButtonGroup } from '@admin/components/ui/button-group'
+import type { MediaFiltersBarSelectionState } from '@admin/hooks/use-media-filters-bar'
+import { usePageScrollThreshold } from '@admin/hooks/use-page-scroll-threshold'
+import { cn } from '@admin/utils/shared/cn'
+import { CircleCheck, FileText, Film, ImageIcon, X } from 'lucide-react'
+import * as React from 'react'
+
+type ContentTypeFilter = 'all' | 'image' | 'video' | 'document'
+
+const SCROLL_BORDER_OFFSET = 8
+
+const CONTENT_TYPE_TABS: {
+  value: ContentTypeFilter
+  label: string
+  icon: React.ReactNode
+}[] = [
+  { value: 'all', label: 'All', icon: null },
+  { value: 'image', label: 'Images', icon: <ImageIcon /> },
+  { value: 'video', label: 'Videos', icon: <Film /> },
+  { value: 'document', label: 'Documents', icon: <FileText /> }
+]
+
+interface MediaFiltersBarProps {
+  search?: string
+  onSearch: (value: string | null) => void
+  contentType: ContentTypeFilter
+  onContentTypeChange: (value: ContentTypeFilter) => void
+  isPending?: boolean
+  actions?: React.ReactNode
+  selection: MediaFiltersBarSelectionState
+}
+
+export function MediaFiltersBar({
+  search,
+  onSearch,
+  contentType,
+  onContentTypeChange,
+  isPending,
+  actions,
+  selection
+}: MediaFiltersBarProps) {
+  const hasScrolled = usePageScrollThreshold(SCROLL_BORDER_OFFSET)
+
+  return (
+    <div
+      className={cn(
+        'sticky z-9 flex flex-col gap-1 h-16 px-4 xl:flex-row xl:items-center xl:justify-between top-14 bg-background transition-shadow overflow-clip',
+        {
+          'shadow-modal/3': hasScrolled
+        }
+      )}
+    >
+      <div className="flex flex-1 items-center gap-1 w-full">
+        <SearchInput
+          value={search}
+          placeholder={contentType === 'all' ? 'Search media...' : `Search ${contentType}s...`}
+          isPending={isPending}
+          onSearch={onSearch}
+        />
+
+        <ButtonGroup>
+          {CONTENT_TYPE_TABS.map((tab) => (
+            <Button
+              key={tab.value}
+              type="button"
+              variant={contentType === tab.value ? 'secondary' : 'outline'}
+              onClick={() => {
+                React.startTransition(() => {
+                  onContentTypeChange(tab.value)
+                })
+              }}
+            >
+              {tab.icon}
+              {tab.label}
+            </Button>
+          ))}
+        </ButtonGroup>
+      </div>
+
+      <div className="flex items-center gap-1 self-end xl:self-auto">
+        {actions}
+
+        {selection.isSelectMode ? (
+          <ButtonGroup>
+            <Button
+              variant="outline"
+              disabled={selection.allLoadedSelected}
+              onClick={selection.selectAll}
+            >
+              Select All
+            </Button>
+            <Button
+              variant="outline"
+              disabled={!selection.hasSelection}
+              onClick={selection.deselectAll}
+            >
+              Deselect All
+            </Button>
+            <Button
+              type="button"
+              variant="outline"
+              size="icon"
+              onClick={selection.cancelSelectMode}
+              aria-label="Cancel select mode"
+            >
+              <X />
+            </Button>
+          </ButtonGroup>
+        ) : (
+          <Button
+            type="button"
+            variant="outline"
+            onClick={selection.enterSelectMode}
+            disabled={!selection.hasLoadedMedia || selection.allLoadedSelected}
+          >
+            <CircleCheck />
+            Select Files
+          </Button>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export type { ContentTypeFilter, MediaFiltersBarProps, MediaFiltersBarSelectionState }

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

@@ -0,0 +1,182 @@
+'use client'
+
+import { UploadDropzone } from '@admin/components/custom/upload-dropzone'
+import { Button } from '@admin/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from '@admin/components/ui/dialog'
+import * as TabsUi from '@admin/components/ui/tabs'
+import {
+  clampMediaPage,
+  clampMediaPageSize,
+  useMediaList,
+  useMediaSelection
+} from '@admin/hooks/use-media'
+import { useUpload } from '@admin/hooks/use-upload'
+import type { AdminMedia } from '@admin/types'
+import { useQueryClient } from '@tanstack/react-query'
+import { parseAsInteger, parseAsStringLiteral, useQueryStates } from 'nuqs'
+import { toast } from 'sonner'
+import { MediaGrid } from './media-grid'
+import { MediaGridPagination } from './media-grid-pagination'
+import { MediaUrlImporter } from './media-url-importer'
+
+const MEDIA_GALLERY_QUERY_PARSERS = {
+  mg_tab: parseAsStringLiteral(['upload', 'url']).withDefault('upload'),
+  mg_page: parseAsInteger.withDefault(1),
+  mg_size: parseAsInteger.withDefault(40)
+}
+
+interface MediaGalleryDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onSelect: (media: AdminMedia | AdminMedia[]) => void
+  mode?: 'single' | 'multi'
+  accept?: string
+}
+
+export function MediaGalleryDialog({
+  open,
+  onOpenChange,
+  onSelect,
+  mode = 'single',
+  accept
+}: MediaGalleryDialogProps) {
+  const queryClient = useQueryClient()
+
+  const [query, setQueryParams] = useQueryStates(MEDIA_GALLERY_QUERY_PARSERS)
+  const activeTab = query.mg_tab
+  const page = query.mg_page
+  const pageSize = query.mg_size
+  const safePage = clampMediaPage(page)
+  const safePageSize = clampMediaPageSize(pageSize)
+
+  const {
+    selectedMap,
+    handleItemClick,
+    reset: resetSelection,
+    getSelection,
+    count: selectionCount
+  } = useMediaSelection(mode)
+
+  const { media, pageCount } = useMediaList({
+    contentType: accept?.split('/')[0],
+    page: safePage,
+    pageSize: safePageSize
+  })
+
+  const { upload, uploadFromUrl, progress, isUploading } = useUpload({
+    accept,
+    prefix: 'media',
+    isActive: open,
+    onSuccess: (result) => {
+      void queryClient.invalidateQueries({ queryKey: ['media'] })
+      if (result.success) {
+        toast.success('Media uploaded successfully')
+      } else {
+        toast.error(result.error ?? 'Failed to upload media')
+      }
+    },
+    onError: (error) => {
+      toast.error(error.message || 'Failed to upload media')
+    }
+  })
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(next) => {
+        if (next) {
+          resetSelection()
+          void setQueryParams({ mg_tab: 'upload', mg_page: 1 })
+        }
+        onOpenChange(next)
+      }}
+    >
+      <DialogContent className="flex max-h-[700px] h-[80svh] min-h-0 flex-col overflow-hidden sm:max-w-3xl gap-4">
+        <DialogHeader>
+          <DialogTitle>Select file</DialogTitle>
+          <DialogDescription>
+            {mode === 'single'
+              ? 'Select a file from the library or upload a new one.'
+              : 'Select one or more files from the library or upload new ones.'}
+          </DialogDescription>
+        </DialogHeader>
+
+        <TabsUi.Tabs
+          value={activeTab}
+          onValueChange={(value) => {
+            void setQueryParams({ mg_tab: value as 'upload' | 'url' })
+          }}
+          className="flex min-h-0 w-full flex-col overflow-hidden"
+        >
+          <TabsUi.TabsList className="w-full shrink-0">
+            <TabsUi.TabsTrigger value="upload">Select</TabsUi.TabsTrigger>
+            <TabsUi.TabsTrigger value="url">Import from URL</TabsUi.TabsTrigger>
+          </TabsUi.TabsList>
+
+          <TabsUi.TabsContent value="upload" className="min-h-0 h-full flex-1">
+            <UploadDropzone
+              onFilesSelected={upload}
+              progress={progress}
+              isUploading={isUploading}
+              accept={accept}
+              className="h-[180px]"
+            />
+          </TabsUi.TabsContent>
+
+          <TabsUi.TabsContent value="url" className="min-h-0 flex-1">
+            <MediaUrlImporter
+              onImportFromUrl={uploadFromUrl}
+              accept={accept}
+              className="h-[180px]"
+            />
+          </TabsUi.TabsContent>
+        </TabsUi.Tabs>
+
+        <MediaGrid
+          items={media}
+          selectedIds={selectedMap}
+          isSelectMode
+          onItemClick={handleItemClick}
+          className="pb-5"
+        />
+
+        <DialogFooter className="mt-auto">
+          <div className="flex items-center justify-end gap-3">
+            <Button variant="outline" onClick={() => onOpenChange(false)}>
+              Cancel
+            </Button>
+            <MediaGridPagination
+              page={safePage}
+              pageCount={pageCount}
+              pageSize={safePageSize}
+              onPageChange={(value) => {
+                void setQueryParams({ mg_page: value })
+              }}
+              onPageSizeChange={(value) => {
+                void setQueryParams({ mg_size: value })
+              }}
+              className="px-0"
+              isMinimal={true}
+            />
+            <Button
+              onClick={() => {
+                onSelect(getSelection())
+                onOpenChange(false)
+              }}
+              disabled={selectionCount === 0}
+            >
+              {mode === 'single' ? 'Done' : `Done (${selectionCount})`}
+            </Button>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

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

@@ -0,0 +1,56 @@
+'use client'
+
+import { MediaPreview } from '@admin/components/shared/media/media-preview'
+import { Card, CardContent, CardFooter } from '@admin/components/ui/card'
+import { Checkbox } from '@admin/components/ui/checkbox'
+import type { AdminMedia } from '@admin/types'
+import { cn } from '@admin/utils/shared/cn'
+import * as React from 'react'
+
+interface MediaGridItemProps {
+  item: AdminMedia
+  selected?: boolean
+  isSelectMode?: boolean
+  onClick: (item: AdminMedia) => void
+}
+
+export const MediaGridItem = React.memo(function MediaGridItem({
+  item,
+  selected = false,
+  isSelectMode = false,
+  onClick
+}: MediaGridItemProps) {
+  return (
+    <Card className="relative group cursor-pointer" onClick={() => onClick(item)}>
+      <CardContent
+        aria-pressed={isSelectMode ? selected : undefined}
+        className={cn('p-2 flex flex-col hover:border-highlight', {
+          'border-highlight': selected
+        })}
+      >
+        <div className="flex size-full bg-background border border-border rounded-sm aspect-square overflow-hidden">
+          <MediaPreview media={item} isFilled />
+        </div>
+
+        {isSelectMode && (
+          <Checkbox
+            aria-label={selected ? `Deselect ${item.filename}` : `Select ${item.filename}`}
+            tabIndex={-1}
+            className={cn('absolute top-3 right-3 z-10 rounded-full bg-card', {
+              'ring ring-white': selected
+            })}
+            checked={selected}
+            onCheckedChange={() => onClick(item)}
+          />
+        )}
+      </CardContent>
+      <CardFooter>
+        <span className="w-full truncate text-sm text-muted-foreground group-hover:text-foreground">
+          {item.filename}
+        </span>
+      </CardFooter>
+    </Card>
+  )
+})
+
+MediaGridItem.displayName = 'MediaGridItem'

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

@@ -0,0 +1,114 @@
+'use client'
+
+import { Button } from '@admin/components/ui/button'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@admin/components/ui/select'
+import { cn } from '@admin/utils/shared/cn'
+import * as React from 'react'
+
+const PAGE_SIZE_OPTIONS = [
+  { value: '20', label: '20' },
+  { value: '40', label: '40' },
+  { value: '80', label: '80' }
+]
+
+type MediaGridPaginationProps = React.HTMLAttributes<HTMLDivElement> & {
+  page: number
+  pageCount: number
+  pageSize: number
+  onPageChange: (page: number) => void
+  onPageSizeChange: (size: number) => void
+  isMinimal?: boolean
+}
+
+export function MediaGridPagination({
+  page,
+  pageCount,
+  pageSize,
+  onPageChange,
+  onPageSizeChange,
+  className,
+  isMinimal = false
+}: MediaGridPaginationProps) {
+  const pageSizeValue = String(pageSize)
+  const isFirstPage = page <= 1
+  const isLastPage = page >= pageCount
+  const perPage = 'Items per page'
+
+  const handlePageSizeChange = React.useCallback(
+    (value: string) => {
+      React.startTransition(() => {
+        onPageSizeChange(Number(value))
+        onPageChange(1)
+      })
+    },
+    [onPageSizeChange, onPageChange]
+  )
+  function prev() {
+    onPageChange(page - 1)
+  }
+
+  function next() {
+    onPageChange(page + 1)
+  }
+
+  return (
+    <div
+      className={cn(
+        'pointer-events-none fixed right-0 bottom-0 left-(--admin-shell-content-left) z-10 isolate flex flex-col transition-[left] duration-200 ease-linear',
+        {
+          static: isMinimal
+        },
+        className
+      )}
+    >
+      <div
+        className={cn(
+          'pointer-events-auto flex [--admin-shell-bottom-bar-height:53px] h-(--admin-shell-bottom-bar-height) items-center justify-between border-t border-border/80 bg-background px-4 py-2',
+          {
+            'border-none p-0 bg-transparent': isMinimal
+          }
+        )}
+      >
+        {!isMinimal && (
+          <div className="flex items-center gap-2">
+            <span className="text-sm text-muted-foreground">{perPage}</span>
+            <Select value={pageSizeValue} onValueChange={handlePageSizeChange}>
+              <SelectTrigger className="w-25 h-8">
+                <SelectValue>{pageSize}</SelectValue>
+              </SelectTrigger>
+              <SelectContent>
+                {PAGE_SIZE_OPTIONS.map((option) => (
+                  <SelectItem key={option.value} value={option.value}>
+                    {option.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        )}
+
+        <div className="flex items-center space-x-2">
+          <Button variant="outline" onClick={prev} disabled={isFirstPage}>
+            Previous
+          </Button>
+
+          {!isMinimal && (
+            <div className="text-sm text-muted-foreground">
+              Page {page} of {pageCount}
+            </div>
+          )}
+
+          <Button variant="outline" onClick={next} disabled={isLastPage}>
+            Next
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}