betterstart-cli 0.0.1

package/dist/assets/adapters/next/templates/init/components/shared/entity-versions/entity-version-restore-dialog.tsx

@@ -0,0 +1,80 @@
+'use client'
+
+import type { EntityVersionWithAuthor } from '@admin/actions/entity-versions'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger
+} from '@admin/components/ui/alert-dialog'
+import { Button } from '@admin/components/ui/button'
+import { useRouter } from 'next/navigation'
+import * as React from 'react'
+import { toast } from 'sonner'
+
+interface EntityVersionRestoreDialogProps {
+  version: EntityVersionWithAuthor
+  restoreVersionAction: (versionId: string) => Promise<unknown>
+  onRestored: () => void
+}
+
+export function EntityVersionRestoreDialog({
+  version,
+  restoreVersionAction,
+  onRestored
+}: EntityVersionRestoreDialogProps) {
+  const router = useRouter()
+  const [open, setOpen] = React.useState(false)
+  const [isPending, startTransition] = React.useTransition()
+
+  function handleRestore() {
+    startTransition(async () => {
+      try {
+        await restoreVersionAction(version.id)
+        toast.success(`Restored v${version.version}`)
+        setOpen(false)
+        onRestored()
+        router.refresh()
+      } catch (error) {
+        toast.error(error instanceof Error ? error.message : 'Failed to restore version')
+      }
+    })
+  }
+
+  return (
+    <AlertDialog open={open} onOpenChange={setOpen}>
+      <AlertDialogTrigger asChild>
+        <Button variant="outline" size="sm">
+          Restore
+        </Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Restore v{version.version}?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This will replace the current entity content with v{version.version}. The current
+            content will be saved as a new version before restoring.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={isPending}>Cancel</AlertDialogCancel>
+          <AlertDialogAction
+            variant="default"
+            onClick={(event) => {
+              event.preventDefault()
+              handleRestore()
+            }}
+            disabled={isPending}
+          >
+            {isPending ? 'Restoring...' : 'Restore'}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}

package/dist/assets/adapters/next/templates/init/components/shared/entity-versions/entity-versions-button.tsx

@@ -0,0 +1,74 @@
+'use client'
+
+import type { EntityVersionWithAuthor } from '@admin/actions/entity-versions'
+import { EntityVersionsDrawer } from '@admin/components/shared/entity-versions/entity-versions-drawer'
+import { Button } from '@admin/components/ui/button'
+import { useEntityVersions } from '@admin/hooks/use-entity-versions'
+import { History } from 'lucide-react'
+import * as React from 'react'
+
+interface EntityVersionsButtonAuthor {
+  name: string
+  email: string
+  image?: string | null
+}
+
+interface EntityVersionsButtonProps {
+  entityType: string
+  entityId: string
+  updatedAt: Date | string
+  updatedByUser: EntityVersionsButtonAuthor | null
+  getVersionsAction: (entityId: string) => Promise<EntityVersionWithAuthor[]>
+  restoreVersionAction: (versionId: string) => Promise<unknown>
+}
+
+export function EntityVersionsButton({
+  entityType,
+  entityId,
+  updatedAt,
+  updatedByUser,
+  getVersionsAction,
+  restoreVersionAction
+}: EntityVersionsButtonProps) {
+  const [open, setOpen] = React.useState(false)
+  const { versions, isPending, load } = useEntityVersions({
+    entityId,
+    getVersionsAction
+  })
+
+  const handleOpenChange = React.useCallback(
+    (nextOpen: boolean) => {
+      setOpen(nextOpen)
+      if (nextOpen) {
+        load()
+      }
+    },
+    [load]
+  )
+
+  return (
+    <>
+      <Button
+        type="button"
+        variant="ghost"
+        size="sm"
+        onClick={() => handleOpenChange(true)}
+        className="ml-auto shrink-0"
+      >
+        <History className="size-4" />
+        Versions
+      </Button>
+      <EntityVersionsDrawer
+        open={open}
+        onOpenChange={handleOpenChange}
+        entityType={entityType}
+        versions={versions}
+        isPending={isPending}
+        currentUpdatedAt={updatedAt}
+        currentAuthor={updatedByUser}
+        restoreVersionAction={restoreVersionAction}
+        onRestored={load}
+      />
+    </>
+  )
+}

package/dist/assets/adapters/next/templates/init/components/shared/entity-versions/entity-versions-current-row.tsx

@@ -0,0 +1,48 @@
+'use client'
+
+import { Avatar, AvatarFallback, AvatarImage } from '@admin/components/ui/avatar'
+import { Badge } from '@admin/components/ui/badge'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@admin/components/ui/tooltip'
+import { getUserInitials } from '@admin/utils/user/user'
+import { format, formatDistanceToNow } from 'date-fns'
+
+interface CurrentVersionAuthor {
+  name: string
+  email: string
+  image?: string | null
+}
+
+interface EntityVersionsCurrentRowProps {
+  updatedAt: Date | string
+  author: CurrentVersionAuthor | null
+}
+
+export function EntityVersionsCurrentRow({ updatedAt, author }: EntityVersionsCurrentRowProps) {
+  const updatedDate = new Date(updatedAt)
+  const authorLabel = author?.name || author?.email || 'System'
+
+  return (
+    <div className="flex items-center justify-between gap-3 rounded-2xl border border-border bg-card px-3 py-3">
+      <div className="flex min-w-0 items-center gap-3">
+        <Avatar size="sm">
+          {author?.image ? <AvatarImage src={author.image} alt={authorLabel} /> : null}
+          <AvatarFallback>{getUserInitials(authorLabel)}</AvatarFallback>
+        </Avatar>
+        <div className="min-w-0">
+          <div className="flex items-center gap-2">
+            <p className="truncate font-medium text-foreground">{authorLabel}</p>
+            <Badge variant="outline">Current</Badge>
+          </div>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <p className="w-fit text-xs text-muted-foreground">
+                Edited {formatDistanceToNow(updatedDate, { addSuffix: true })}
+              </p>
+            </TooltipTrigger>
+            <TooltipContent>{format(updatedDate, 'PPpp')}</TooltipContent>
+          </Tooltip>
+        </div>
+      </div>
+    </div>
+  )
+}

package/dist/assets/adapters/next/templates/init/components/shared/entity-versions/entity-versions-drawer.tsx

@@ -0,0 +1,79 @@
+'use client'
+
+import type { EntityVersionWithAuthor } from '@admin/actions/entity-versions'
+import {
+  Drawer,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle
+} from '@admin/components/ui/drawer'
+import { ScrollArea } from '@admin/components/ui/scroll-area'
+import { EntityVersionItem } from './entity-version-item'
+import { EntityVersionsCurrentRow } from './entity-versions-current-row'
+
+interface EntityVersionsDrawerAuthor {
+  name: string
+  email: string
+  image?: string | null
+}
+
+interface EntityVersionsDrawerProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  entityType: string
+  versions: EntityVersionWithAuthor[]
+  isPending: boolean
+  currentUpdatedAt: Date | string
+  currentAuthor: EntityVersionsDrawerAuthor | null
+  restoreVersionAction: (versionId: string) => Promise<unknown>
+  onRestored: () => void
+}
+
+export function EntityVersionsDrawer({
+  open,
+  onOpenChange,
+  entityType,
+  versions,
+  isPending,
+  currentUpdatedAt,
+  currentAuthor,
+  restoreVersionAction,
+  onRestored
+}: EntityVersionsDrawerProps) {
+  return (
+    <Drawer direction="right" open={open} onOpenChange={onOpenChange} modal>
+      <DrawerContent className="h-full sm:max-w-lg">
+        <DrawerHeader className="border-b border-border">
+          <DrawerTitle>Versions</DrawerTitle>
+          <DrawerDescription>
+            Review previous {entityType} versions and restore a saved state.
+          </DrawerDescription>
+        </DrawerHeader>
+        <ScrollArea className="min-h-0 flex-1">
+          <div className="flex flex-col gap-3 p-4">
+            <EntityVersionsCurrentRow updatedAt={currentUpdatedAt} author={currentAuthor} />
+            {isPending ? (
+              <p className="rounded-2xl border border-dashed border-border px-3 py-6 text-center text-sm text-muted-foreground">
+                Loading versions...
+              </p>
+            ) : null}
+            {!isPending && versions.length === 0 ? (
+              <p className="rounded-2xl border border-dashed border-border px-3 py-6 text-center text-sm text-muted-foreground">
+                No previous versions yet.
+              </p>
+            ) : null}
+            {versions.map((version) => (
+              <EntityVersionItem
+                key={version.id}
+                version={version}
+                restoreVersionAction={restoreVersionAction}
+                onRestored={onRestored}
+              />
+            ))}
+          </div>
+        </ScrollArea>
+      </DrawerContent>
+    </Drawer>
+  )
+}

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

@@ -0,0 +1,222 @@
+'use client'
+
+import { updateMedia } from '@admin/actions/media'
+import { MediaDeleteDrawer } from '@admin/components/shared/media/media-delete-drawer'
+import { MediaPreview } from '@admin/components/shared/media/media-preview'
+import { Button } from '@admin/components/ui/button'
+import { Card, CardContent, CardFooter } from '@admin/components/ui/card'
+import { DrawerContent, DrawerFooter, DrawerHeader, DrawerTitle } from '@admin/components/ui/drawer'
+import { Form, FormControl, FormField, FormItem, FormLabel } from '@admin/components/ui/form'
+import { Input } from '@admin/components/ui/input'
+import { useCopyToClipboard } from '@admin/hooks/use-copy-to-clipboard'
+import type { AdminMedia } from '@admin/types'
+import { format } from 'date-fns'
+import { Check, ClockPlus, Copy, Link2, LoaderCircle, UserRoundCheck } from 'lucide-react'
+import Link from 'next/link'
+import * as React from 'react'
+import { useForm } from 'react-hook-form'
+import { toast } from 'sonner'
+
+interface EditMediaDialogContentProps {
+  media: AdminMedia
+  onOpenChange: (open: boolean) => void
+  onSaved: () => void
+}
+
+interface EditMediaFormValues {
+  alt: string
+  tags: string
+}
+
+export function EditMediaDialogContent({
+  media,
+  onOpenChange,
+  onSaved
+}: EditMediaDialogContentProps) {
+  const formId = React.useId()
+  const form = useForm<EditMediaFormValues>({
+    defaultValues: {
+      alt: media.alt ?? '',
+      tags: media.tags?.join(', ') ?? ''
+    }
+  })
+  const { isDirty } = form.formState
+  const [isPending, startSaveTransition] = React.useTransition()
+  const [isDeleting, startDeleteTransition] = React.useTransition()
+  const [drawerContainer, setDrawerContainer] = React.useState<HTMLDivElement | null>(null)
+  const [copyMediaUrl, hasCopiedMediaUrl] = useCopyToClipboard()
+  const uploadedBy = media.createdByUser?.name || media.createdByUser?.email || 'System'
+
+  const handleDrawerContainerRef = React.useCallback((node: HTMLDivElement | null) => {
+    setDrawerContainer(node)
+  }, [])
+
+  const handleCopyMediaUrl = React.useCallback(() => {
+    void copyMediaUrl(media.url).then((copied) => {
+      if (copied) {
+        toast.success('Media URL copied')
+        return
+      }
+
+      toast.error('Failed to copy media URL')
+    })
+  }, [copyMediaUrl, media.url])
+
+  function handleSave(values: EditMediaFormValues) {
+    if (isPending || isDeleting || !isDirty) {
+      return
+    }
+
+    startSaveTransition(async () => {
+      try {
+        const tagArray = values.tags
+          .split(',')
+          .map((tag) => tag.trim())
+          .filter(Boolean)
+        const result = await updateMedia(media.id, {
+          alt: values.alt || undefined,
+          tags: tagArray.length > 0 ? tagArray : undefined
+        })
+        if (result.success) {
+          toast.success('Media updated')
+          onSaved()
+        } else {
+          toast.error(result.error ?? 'Failed to update')
+        }
+      } catch (error) {
+        toast.error(error instanceof Error ? error.message : 'Failed to update')
+      }
+    })
+  }
+
+  return (
+    <DrawerContent className="h-full w-full overflow-hidden">
+      <div
+        ref={handleDrawerContainerRef}
+        className="pointer-events-none absolute inset-3 z-20 overflow-hidden rounded-lg"
+      />
+      <div className="relative z-10 flex min-h-0 flex-1 flex-col overflow-hidden">
+        <DrawerHeader>
+          <DrawerTitle>Media file</DrawerTitle>
+        </DrawerHeader>
+        <Form {...form}>
+          <form
+            id={formId}
+            onSubmit={form.handleSubmit(handleSave)}
+            className="flex flex-1 flex-col gap-4 overflow-y-auto px-4 pb-4 pt-px"
+          >
+            <Card>
+              <CardContent className="p-0">
+                <div className="relative aspect-video overflow-hidden rounded-lg bg-background">
+                  <MediaPreview media={media} showMetadata />
+                </div>
+              </CardContent>
+
+              <CardFooter className="grid w-full pt-5 gap-1 pb-3">
+                <div className="grid w-full gap-2">
+                  <div className="flex w-full min-w-0 items-center gap-x-2">
+                    <div className="flex min-w-0 flex-1 items-center gap-x-2 text-muted-foreground">
+                      <UserRoundCheck className="size-4 shrink-0" />
+                      <span>Uploaded by</span>
+                      <span className="text-foreground">{uploadedBy}</span>
+                    </div>
+                  </div>
+
+                  <div className="flex w-full min-w-0 items-center gap-x-2">
+                    <div className="flex min-w-0 flex-1 items-center gap-x-2 text-muted-foreground">
+                      <ClockPlus className="size-4 shrink-0" />
+                      <span>Uploaded on</span>
+                      <span className="text-foreground">
+                        {format(new Date(media.createdAt), 'PPpp')}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="flex w-full min-w-0 items-center gap-x-2">
+                  <div className="flex min-w-0 flex-1 items-center gap-x-2 text-muted-foreground">
+                    <Link2 className="size-4 shrink-0" />
+                    <Link
+                      href={media.url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="min-w-0 truncate text-foreground underline-offset-4 hover:underline"
+                    >
+                      {media.url}
+                    </Link>
+                  </div>
+                  <Button
+                    type="button"
+                    aria-label={hasCopiedMediaUrl ? 'Media URL copied' : 'Copy media URL'}
+                    variant="ghost"
+                    title={hasCopiedMediaUrl ? 'Copied' : 'Copy media URL'}
+                    onClick={handleCopyMediaUrl}
+                    className="size-7 shrink-0"
+                  >
+                    {hasCopiedMediaUrl ? <Check /> : <Copy />}
+                  </Button>
+                </div>
+              </CardFooter>
+            </Card>
+
+            <FormField
+              control={form.control}
+              name="alt"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Alt text</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder="Describe this media for accessibility"
+                      disabled={isPending || isDeleting}
+                      {...field}
+                    />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="tags"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Tags (comma separated)</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder="e.g. hero, product, banner"
+                      disabled={isPending || isDeleting}
+                      {...field}
+                    />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+          </form>
+        </Form>
+
+        <DrawerFooter>
+          <Button type="submit" form={formId} disabled={isPending || isDeleting || !isDirty}>
+            {isPending && <LoaderCircle className="animate-spin" />}
+            Save
+          </Button>
+          <MediaDeleteDrawer
+            media={media}
+            container={drawerContainer}
+            disabled={isPending}
+            deletePending={isDeleting}
+            startDeleteTransition={startDeleteTransition}
+            onDeleted={onSaved}
+          />
+          <Button
+            variant="secondary"
+            onClick={() => onOpenChange(false)}
+            disabled={isPending || isDeleting}
+          >
+            Cancel
+          </Button>
+        </DrawerFooter>
+      </div>
+    </DrawerContent>
+  )
+}

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

@@ -0,0 +1,56 @@
+'use client'
+
+import { Drawer } from '@admin/components/ui/drawer'
+import type { AdminMedia } from '@admin/types'
+import * as React from 'react'
+import { EditMediaDialogContent } from './edit-media-dialog-content'
+
+interface EditMediaDialogProps {
+  media: AdminMedia | null
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  onSaved: () => void
+}
+
+export function EditMediaDialog({ media, open, onOpenChange, onSaved }: EditMediaDialogProps) {
+  const [closingMedia, setClosingMedia] = React.useState<AdminMedia | null>(null)
+  const isOpen = open && media !== null
+  const activeMedia = media ?? closingMedia
+
+  function handleOpenChange(nextOpen: boolean) {
+    if (!nextOpen) {
+      setClosingMedia(activeMedia)
+    }
+    onOpenChange(nextOpen)
+  }
+
+  function handleSaved() {
+    setClosingMedia(activeMedia)
+    onSaved()
+  }
+
+  return (
+    <Drawer
+      direction="right"
+      open={isOpen}
+      onOpenChange={handleOpenChange}
+      onAnimationEnd={(nextOpen) => {
+        if (nextOpen) {
+          setClosingMedia(null)
+          return
+        }
+
+        setClosingMedia(null)
+      }}
+    >
+      {activeMedia ? (
+        <EditMediaDialogContent
+          key={activeMedia.id}
+          media={activeMedia}
+          onOpenChange={handleOpenChange}
+          onSaved={handleSaved}
+        />
+      ) : null}
+    </Drawer>
+  )
+}

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

@@ -0,0 +1,83 @@
+'use client'
+
+import { deleteMedia } from '@admin/actions/media'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger
+} from '@admin/components/ui/alert-dialog'
+import { Button } from '@admin/components/ui/button'
+import type { AdminMedia } from '@admin/types'
+import { Trash2 } from 'lucide-react'
+import * as React from 'react'
+import { toast } from 'sonner'
+
+interface MediaDeleteDialogProps {
+  media: AdminMedia
+  disabled?: boolean
+  onDeleted: () => void
+}
+
+export function MediaDeleteDialog({ media, disabled = false, onDeleted }: MediaDeleteDialogProps) {
+  const [isPending, startDeleteTransition] = React.useTransition()
+
+  function handleDelete() {
+    if (isPending) {
+      return
+    }
+
+    startDeleteTransition(async () => {
+      try {
+        const result = await deleteMedia(media.id)
+
+        if (result.success) {
+          toast.success('Media deleted')
+          onDeleted()
+          return
+        }
+
+        toast.error(result.error ?? 'Failed to delete media')
+      } catch (error) {
+        toast.error(error instanceof Error ? error.message : 'Failed to delete media')
+      }
+    })
+  }
+
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button variant="destructive" disabled={disabled || isPending}>
+          <Trash2 data-icon="inline-start" />
+          Delete media
+        </Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Delete this media?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This removes {media.filename} from the media library. Storage files are not removed.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={isPending}>Cancel</AlertDialogCancel>
+          <AlertDialogAction
+            variant="destructive"
+            disabled={isPending}
+            onClick={(event) => {
+              event.preventDefault()
+              void handleDelete()
+            }}
+          >
+            {isPending ? 'Deleting...' : 'Delete'}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}