@xk2800/nextjs-template 0.7.1-beta.0 → 0.7.1-beta.10

package/components/ui/dropdown-menu.tsx

@@ -47,7 +47,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border-(length:--surface-border-width) border-(--surface-border-color) bg-popover p-1 text-popover-foreground shadow-(--popover-shadow) data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     )}
     {...props}
@@ -65,7 +65,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border-(length:--surface-border-width) border-(--surface-border-color) bg-popover p-1 text-popover-foreground shadow-(--popover-shadow) data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
       {...props}

package/components/ui/file-upload.tsx

@@ -4,6 +4,8 @@ import * as React from "react"
 import { Camera, ImagePlus, Upload, X } from "lucide-react"
 
 import { Button } from "./button"
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./dialog"
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "./sheet"
 import { cn } from "../../lib/utils"
 
 type FileUploadProps = {
@@ -13,6 +15,13 @@ type FileUploadProps = {
   gallery?: boolean
   /** Drop files onto the component. */
   dragDrop?: boolean
+  /**
+   * Pressing the drop zone opens the picker instead of showing separate buttons. With both
+   * `camera` and `gallery` the user is asked which one; with one, it opens directly. Needs `dragDrop`.
+   */
+  clickable?: boolean
+  /** How a touch-screen user is asked "camera or gallery" with `clickable`: a bottom sheet or a centered modal. */
+  chooser?: "sheet" | "modal"
   /** Same format as `<input accept>`. Also enforced on dropped files. */
   accept?: string
   multiple?: boolean
@@ -23,6 +32,14 @@ type FileUploadProps = {
   icon?: React.ReactNode
   /** Drop zone text. Defaults to "Drag and drop files here" (or "a file" when `multiple` is false). */
   label?: React.ReactNode
+  /** Smaller sub text under the drop zone label. */
+  description?: React.ReactNode
+  /** Extra classes for the dashed drop zone box. */
+  dropzoneClassName?: string
+  /** Extra classes for the label text. */
+  labelClassName?: string
+  /** Extra classes for the description text. */
+  descriptionClassName?: string
   onFilesChange?: (files: File[]) => void
   className?: string
 }
@@ -41,6 +58,8 @@ function FileUpload({
   camera = false,
   gallery = false,
   dragDrop = false,
+  clickable = false,
+  chooser = "sheet",
   accept = "image/*",
   multiple = true,
   maxFiles,
@@ -48,6 +67,10 @@ function FileUpload({
   disabled = false,
   icon = <Upload className="size-6" />,
   label,
+  description,
+  dropzoneClassName,
+  labelClassName,
+  descriptionClassName,
   onFilesChange,
   className,
 }: FileUploadProps) {
@@ -56,12 +79,18 @@ function FileUpload({
   const [dragging, setDragging] = React.useState(false)
   const cameraRef = React.useRef<HTMLInputElement>(null)
   const galleryRef = React.useRef<HTMLInputElement>(null)
+  const [askOpen, setAskOpen] = React.useState(false)
+  const pointerType = React.useRef("")
 
-  const previews = React.useMemo(
-    () => files.map((f) => (f.type.startsWith("image/") ? URL.createObjectURL(f) : null)),
-    [files]
-  )
-  React.useEffect(() => () => previews.forEach((url) => url && URL.revokeObjectURL(url)), [previews])
+  // Created and revoked in the same effect: with useMemo, Strict Mode's
+  // simulated unmount revoked the URLs and the remount reused the dead ones.
+  const [previews, setPreviews] = React.useState<(string | null)[]>([])
+  React.useEffect(() => {
+    const urls = files.map((f) => (f.type.startsWith("image/") ? URL.createObjectURL(f) : null))
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- object URLs must be created where they're revoked
+    setPreviews(urls)
+    return () => urls.forEach((url) => url && URL.revokeObjectURL(url))
+  }, [files])
 
   const update = (next: File[]) => {
     setFiles(next)
@@ -96,6 +125,37 @@ function FileUpload({
 
   if (!camera && !gallery && !dragDrop) return null
 
+  // Pressing the drop zone only does something if there's a picker to open.
+  const pickable = clickable && !disabled && (camera || gallery)
+  // The camera only means something on touch devices, so mouse and keyboard skip the
+  // question and open the gallery (or the only source there is).
+  const openDefault = () => (gallery ? galleryRef : cameraRef).current?.click()
+  const units = multiple ? "files" : "a file"
+
+  const askTitle = `Add ${multiple ? "photos" : "a photo"}`
+  const askDescription = "Take a new photo or pick from your gallery."
+  const askButtons = (
+    <div className="grid gap-2">
+      {[
+        { ref: cameraRef, Icon: Camera, text: "Take photo" },
+        { ref: galleryRef, Icon: ImagePlus, text: "Choose from gallery" },
+      ].map(({ ref, Icon, text }) => (
+        <Button
+          key={text}
+          type="button"
+          variant="outline"
+          className="h-12 justify-start"
+          onClick={() => {
+            setAskOpen(false)
+            ref.current?.click()
+          }}
+        >
+          <Icon /> {text}
+        </Button>
+      ))}
+    </div>
+  )
+
   const buttons = (
     <div className="flex flex-wrap justify-center gap-2">
       {camera && (
@@ -122,6 +182,28 @@ function FileUpload({
 
       {dragDrop ? (
         <div
+          role={pickable ? "button" : undefined}
+          tabIndex={pickable ? 0 : undefined}
+          onPointerDown={pickable ? (e) => (pointerType.current = e.pointerType) : undefined}
+          onClick={
+            pickable
+              ? () => {
+                  if (camera && gallery && pointerType.current !== "mouse") setAskOpen(true)
+                  else openDefault()
+                  pointerType.current = ""
+                }
+              : undefined
+          }
+          onKeyDown={
+            pickable
+              ? (e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault()
+                    openDefault()
+                  }
+                }
+              : undefined
+          }
           onDragOver={(e) => {
             e.preventDefault()
             if (!disabled) setDragging(true)
@@ -135,18 +217,58 @@ function FileUpload({
           aria-disabled={disabled}
           className={cn(
             "flex flex-col items-center gap-3 rounded-lg border-2 border-dashed p-6 text-center text-sm text-muted-foreground transition-colors",
+            pickable && "cursor-pointer outline-none hover:bg-muted/50 focus-visible:ring-2 focus-visible:ring-ring",
+            // Before the state classes so a custom border can't hide the drag highlight.
+            dropzoneClassName,
             dragging && "border-primary bg-primary/5",
             disabled && "opacity-50"
           )}
         >
           {icon}
-          <p>{label ?? `Drag and drop ${multiple ? "files" : "a file"} here`}</p>
-          {buttons}
+          <div className="space-y-1">
+            <p className={labelClassName}>
+              {label ??
+                (pickable ? (
+                  <>
+                    <span className="pointer-coarse:hidden">Drag and drop {units} here, or click to browse</span>
+                    <span className="hidden pointer-coarse:inline">Tap to add {units}</span>
+                  </>
+                ) : (
+                  `Drag and drop ${units} here`
+                ))}
+            </p>
+            {description && <p className={cn("text-xs", descriptionClassName)}>{description}</p>}
+          </div>
+          {!pickable && buttons}
         </div>
       ) : (
         buttons
       )}
 
+      {pickable && camera && gallery && (
+        chooser === "modal" ? (
+          <Dialog open={askOpen} onOpenChange={setAskOpen}>
+            <DialogContent className="sm:max-w-sm">
+              <DialogHeader>
+                <DialogTitle>{askTitle}</DialogTitle>
+                <DialogDescription>{askDescription}</DialogDescription>
+              </DialogHeader>
+              {askButtons}
+            </DialogContent>
+          </Dialog>
+        ) : (
+          <Sheet open={askOpen} onOpenChange={setAskOpen}>
+            <SheetContent side="bottom" className="mx-auto max-w-lg rounded-t-xl pb-[max(1rem,env(safe-area-inset-bottom))]">
+              <SheetHeader className="pb-0">
+                <SheetTitle>{askTitle}</SheetTitle>
+                <SheetDescription>{askDescription}</SheetDescription>
+              </SheetHeader>
+              <div className="px-4">{askButtons}</div>
+            </SheetContent>
+          </Sheet>
+        )
+      )}
+
       {error && (
         <p role="alert" className="text-sm text-destructive">
           {error}

package/components/ui/select.tsx

@@ -0,0 +1,189 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../lib/utils"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+import { Select as SelectPrimitive } from "radix-ui"
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "flex w-fit items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "item-aligned",
+  align = "center",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border-(length:--surface-border-width) border-(--surface-border-color) bg-popover text-popover-foreground shadow-(--popover-shadow) data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        )}
+        position={position}
+        align={align}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("px-2 py-1.5 text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span
+        data-slot="select-item-indicator"
+        className="absolute right-2 flex size-3.5 items-center justify-center"
+      >
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}

package/components/ui/switch.tsx

@@ -17,7 +17,7 @@ function Switch({
       data-slot="switch"
       data-size={size}
       className={cn(
-        "peer group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80",
+        "peer group/switch inline-flex shrink-0 items-center rounded-(--pill-radius) border border-transparent shadow-xs transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80",
         className
       )}
       {...props}
@@ -25,7 +25,7 @@ function Switch({
       <SwitchPrimitive.Thumb
         data-slot="switch-thumb"
         className={cn(
-          "pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground"
+          "pointer-events-none block rounded-(--pill-radius) bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground"
         )}
       />
     </SwitchPrimitive.Root>

package/dist/activity/logger.js

@@ -24,6 +24,7 @@ __export(schema_exports, {
   accounts: () => accounts,
   activityLogs: () => activityLogs,
   authThrottle: () => authThrottle,
+  consentLog: () => consentLog,
   deviceFingerprints: () => deviceFingerprints,
   errorRefs: () => errorRefs,
   passkeys: () => passkeys,
@@ -178,10 +179,32 @@ var deviceFingerprints = pgCore.pgTable("device_fingerprint", {
   userAgent: pgCore.text("userAgent"),
   country: pgCore.text("country"),
   city: pgCore.text("city"),
+  // Latest FingerprintJS signals for this device (lib/device-fingerprint.ts
+  // getDeviceSignals(): accessibility signals dropped, large values hashed),
+  // shown on the admin user page. Null for rows from before this column.
+  components: pgCore.jsonb("components").$type(),
   createdAt: pgCore.timestamp("createdAt").notNull().defaultNow()
 }, (table) => [
   pgCore.unique("device_fingerprint_user_visitor").on(table.userId, table.visitorId)
 ]);
+var consentLog = pgCore.pgTable("consent_log", {
+  id: pgCore.text("id").notNull().primaryKey().$defaultFn(() => cuid2.createId()),
+  userId: pgCore.text("userId").notNull().references(() => users.id, { onDelete: "cascade" }),
+  // The cookie_consent value: "all", "necessary" or a comma list of purposes.
+  choice: pgCore.text("choice").notNull(),
+  // CONSENT_VERSION (lib/cookie-names.ts) at the time — which banner/policy
+  // wording the user agreed to.
+  version: pgCore.integer("version").notNull(),
+  // id of the user's record this one follows ("" for their first). Unique per
+  // user, so concurrent posts from several tabs that all saw the same latest
+  // record can't each insert a duplicate — one wins, the rest conflict. Works
+  // without transactions (neon-http has none). Null on rows from before it.
+  previousId: pgCore.text("previousId"),
+  createdAt: pgCore.timestamp("createdAt").notNull().defaultNow()
+}, (table) => [
+  pgCore.index("consent_log_user_idx").on(table.userId, table.createdAt),
+  pgCore.unique("consent_log_chain").on(table.userId, table.previousId)
+]);
 var authThrottle = pgCore.pgTable("auth_throttle", {
   fingerprint: pgCore.text("fingerprint").notNull().primaryKey(),
   count: pgCore.integer("count").notNull().default(0),
@@ -211,6 +234,13 @@ var systemSettings = pgCore.pgTable("system_settings", {
   // Attach the error a user hit to feedback they send from it (see
   // lib/feedback-route.ts). Off = only what the user typed is sent.
   feedbackAttachErrors: pgCore.boolean("feedbackAttachErrors").notNull().default(true),
+  // GDPR/ePrivacy consent mode. On: cookie banner, FingerprintJS and One Tap
+  // only after "Accept all", device record erased on withdrawal. Off (no EU/UK
+  // users): no banner, treated as consented. Null = follow
+  // NEXT_PUBLIC_COOKIE_BANNER (nullable so migrating never flips a deployed
+  // banner on or off). proxy.ts mirrors the effective value into the
+  // consent_required cookie for the client (lib/cookie-consent.ts).
+  consentRequired: pgCore.boolean("consentRequired"),
   updatedAt: pgCore.timestamp("updatedAt").notNull().defaultNow(),
   // Who last changed a setting. This row doesn't "belong" to that admin the
   // way sessions/activityLogs belong to their user, so deleting that admin's
@@ -232,6 +262,12 @@ var envSchema = zod.z.object({
   PORT: zod.z.string().default("3000").transform(Number),
   DATABASE_URL: zod.z.string().default(""),
   RESEND_API_KEY: zod.z.string().default(""),
+  // Full access key for marketing broadcasts (admin Marketing email page).
+  // Blank = use RESEND_API_KEY.
+  RESEND_BROADCAST_API_KEY: zod.z.string().default(""),
+  // Resend segment users join from the dashboard "Email updates" toggle.
+  // Blank = toggle hidden.
+  RESEND_MARKETING_SEGMENT_ID: zod.z.string().default(""),
   // Sender for every transactional email. Must be on a domain verified in
   // your Resend account.
   EMAIL_FROM: zod.z.string().default("Acme <onboarding@xavierkhew.xyz>"),