@xk2800/nextjs-template 0.6.1-beta.3 → 0.7.0

package/components/dashboard/deleteAccountCard.tsx

@@ -0,0 +1,137 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { toast } from 'sonner'
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '../ui/card'
+import { Button } from '../ui/button'
+import { Input } from '../ui/input'
+import { PasswordInput } from '../ui/password-input'
+import {
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '../ui/alert-dialog'
+import { authClient, useSession } from '../../lib/auth-client'
+
+export default function DeleteAccountCard() {
+  const { data: session } = useSession()
+  const email = session?.user.email ?? ''
+  // null = still checking. Credential users confirm with their password;
+  // OAuth-only users have none, so they type their email instead and the
+  // server requires a recent sign-in (better-auth's freshAge check).
+  const [hasPassword, setHasPassword] = useState<boolean | null>(null)
+  const [open, setOpen] = useState(false)
+  const [password, setPassword] = useState('')
+  const [typedEmail, setTypedEmail] = useState('')
+  const [deleting, setDeleting] = useState(false)
+
+  useEffect(() => {
+    authClient.listAccounts().then(({ data }) => {
+      setHasPassword(!!data?.some((a) => a.providerId === 'credential'))
+    })
+  }, [])
+
+  const canSubmit = hasPassword ? password.length > 0 : typedEmail.trim().toLowerCase() === email.toLowerCase()
+
+  const close = (next: boolean) => {
+    if (deleting) return
+    setOpen(next)
+    if (!next) {
+      setPassword('')
+      setTypedEmail('')
+    }
+  }
+
+  const deleteAccount = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!canSubmit) return
+    setDeleting(true)
+    try {
+      const { error } = await authClient.deleteUser(hasPassword ? { password } : {})
+      if (error) {
+        toast.error(
+          error.code === 'SESSION_EXPIRED'
+            ? 'For your security, sign out and sign back in, then try again.'
+            : error.message || 'Could not delete account',
+        )
+        return
+      }
+      // Full reload, not router.push: drops every cached session/client state.
+      window.location.href = '/'
+    } finally {
+      setDeleting(false)
+    }
+  }
+
+  return (
+    <>
+      <Card className="border-destructive/50">
+        <CardHeader>
+          <CardTitle>Delete account</CardTitle>
+          <CardDescription>
+            Permanently delete your account, sessions, passkeys, and activity
+            history. This can&apos;t be undone.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Button variant="destructive" onClick={() => setOpen(true)} disabled={hasPassword === null}>
+            Delete account
+          </Button>
+        </CardContent>
+      </Card>
+
+      <AlertDialog open={open} onOpenChange={close}>
+        <AlertDialogContent>
+          <form onSubmit={deleteAccount} className="space-y-4">
+            <AlertDialogHeader>
+              <AlertDialogTitle>Delete your account?</AlertDialogTitle>
+              <AlertDialogDescription>
+                Everything tied to <strong>{email}</strong> is removed immediately
+                and you&apos;ll be signed out on every device.
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+
+            {hasPassword ? (
+              <div className="flex flex-col gap-1">
+                <label htmlFor="delete-password" className="text-sm font-medium">
+                  Enter your password to confirm
+                </label>
+                <PasswordInput
+                  id="delete-password"
+                  autoComplete="current-password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  autoFocus
+                />
+              </div>
+            ) : (
+              <div className="flex flex-col gap-1">
+                <label htmlFor="delete-email" className="text-sm font-medium">
+                  Type <strong>{email}</strong> to confirm
+                </label>
+                <Input
+                  id="delete-email"
+                  autoComplete="off"
+                  value={typedEmail}
+                  onChange={(e) => setTypedEmail(e.target.value)}
+                  autoFocus
+                />
+              </div>
+            )}
+
+            <AlertDialogFooter>
+              <AlertDialogCancel type="button" disabled={deleting}>Cancel</AlertDialogCancel>
+              <Button type="submit" variant="destructive" disabled={!canSubmit || deleting}>
+                {deleting ? 'Deleting...' : 'Delete account'}
+              </Button>
+            </AlertDialogFooter>
+          </form>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  )
+}

package/components/dashboard/errorFeedback.tsx

@@ -0,0 +1,65 @@
+'use client'
+
+import { useEffect, useState, useSyncExternalStore } from "react"
+import { toast, type ExternalToast } from "sonner"
+import FeedbackDialog from "./feedbackDialog"
+
+// One hidden feedback dialog for reporting errors. Mount <ErrorFeedbackHost />
+// once in a layout, only when feedback is configured (FEEDBACK_DISCORD_WEBHOOK_URL
+// or FEEDBACK_EMAIL). Error toasts (toastError) and error pages (reportProblem)
+// then open it as a bug report with the error filled in and attached. Where
+// it isn't mounted, toastError is a plain toast.error.
+let openReport: ((errorText: string) => void) | null = null
+const listeners = new Set<() => void>()
+function setOpenReport(fn: typeof openReport) {
+  openReport = fn
+  listeners.forEach((listener) => listener())
+}
+
+export function ErrorFeedbackHost() {
+  const [errorText, setErrorText] = useState<string | null>(null)
+
+  useEffect(() => {
+    setOpenReport(setErrorText)
+    return () => setOpenReport(null)
+  }, [])
+
+  return (
+    <FeedbackDialog
+      showTrigger={false}
+      open={errorText !== null}
+      onOpenChange={(open) => !open && setErrorText(null)}
+      defaultType="bug"
+      errorDetails={errorText ?? undefined}
+      defaultMessage={
+        errorText ? `Error: ${errorText}\n\nWhat were you doing when this happened?\n` : ""
+      }
+    />
+  )
+}
+
+/** Whether a Report button can open the feedback form (host mounted and configured). */
+export function useCanReportProblem() {
+  return useSyncExternalStore(
+    (listener) => {
+      listeners.add(listener)
+      return () => listeners.delete(listener)
+    },
+    () => openReport !== null,
+    () => false
+  )
+}
+
+export function reportProblem(errorText: string) {
+  openReport?.(errorText)
+}
+
+/** toast.error with a "Report" button that opens the feedback form pre-filled. */
+export function toastError(message: string, options?: ExternalToast) {
+  return toast.error(message, {
+    ...(openReport && {
+      action: { label: "Report", onClick: () => reportProblem(message) },
+    }),
+    ...options,
+  })
+}

package/components/dashboard/feedbackDialog.tsx

@@ -0,0 +1,160 @@
+'use client'
+
+import { useState } from "react"
+import { usePathname } from "next/navigation"
+import { toast } from "sonner"
+import { MessageSquare } from "lucide-react"
+import { Button } from "../ui/button"
+import { Label } from "../ui/label"
+import { Textarea } from "../ui/textarea"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../ui/dialog"
+
+// Keep in sync with the cap in app/api/feedback/route.ts.
+const FEEDBACK_MAX_LENGTH = 2000
+
+type FeedbackType = "bug" | "feedback"
+
+export type FeedbackDialogProps = {
+  /** Control the dialog from outside (e.g. a "Report" button on an error). */
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+  /** Pre-filled each time the dialog opens, e.g. the error the user just hit. */
+  defaultType?: FeedbackType
+  defaultMessage?: string
+  /**
+   * The error the user hit, sent alongside their message (not editable). The
+   * server only forwards it when "Attach error details" is on in System Settings.
+   */
+  errorDetails?: string
+  /** Render the "Feedback" header button. Default `true`. */
+  showTrigger?: boolean
+}
+
+/**
+ * Header button + dialog that POSTs to /api/feedback. Render it only when a
+ * feedback channel is configured (FEEDBACK_DISCORD_WEBHOOK_URL or
+ * FEEDBACK_EMAIL); otherwise the route answers 503.
+ */
+export default function FeedbackDialog({
+  open: openProp,
+  onOpenChange,
+  defaultType = "feedback",
+  defaultMessage = "",
+  errorDetails,
+  showTrigger = true,
+}: FeedbackDialogProps = {}) {
+  const pathname = usePathname()
+  const [openState, setOpenState] = useState(false)
+  const open = openProp ?? openState
+  const setOpen = (next: boolean) => {
+    setOpenState(next)
+    onOpenChange?.(next)
+  }
+  const [type, setType] = useState<FeedbackType>(defaultType)
+  const [message, setMessage] = useState(defaultMessage)
+  const [isSending, setIsSending] = useState(false)
+
+  // With a pre-filled message, re-apply it every time the dialog opens so a
+  // second error report doesn't start from the first one's text. Without one,
+  // keep whatever the user had typed (a closed dialog keeps its draft).
+  const [wasOpen, setWasOpen] = useState(open)
+  if (open !== wasOpen) {
+    setWasOpen(open)
+    if (open && defaultMessage) {
+      setType(defaultType)
+      setMessage(defaultMessage)
+    }
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setIsSending(true)
+    try {
+      const response = await fetch("/api/feedback", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ type, message, page: pathname, error: errorDetails }),
+      })
+      const data = await response.json().catch(() => ({}))
+      if (!response.ok) throw new Error(data.error || "Failed to send feedback")
+
+      toast.success("Thanks! Your feedback was sent.")
+      setMessage("")
+      setOpen(false)
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "Failed to send feedback")
+    } finally {
+      setIsSending(false)
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      {showTrigger && (
+        <DialogTrigger asChild>
+          <Button variant="ghost" size="sm">
+            <MessageSquare />
+            Feedback
+          </Button>
+        </DialogTrigger>
+      )}
+      <DialogContent>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <DialogHeader>
+            <DialogTitle>Send feedback</DialogTitle>
+            <DialogDescription>
+              Report a bug or tell us what could be better.
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="flex gap-2" role="radiogroup" aria-label="Feedback type">
+            {(["feedback", "bug"] as const).map((t) => (
+              <Button
+                key={t}
+                type="button"
+                role="radio"
+                aria-checked={type === t}
+                variant={type === t ? "default" : "outline"}
+                size="sm"
+                onClick={() => setType(t)}
+              >
+                {t === "bug" ? "Bug report" : "General feedback"}
+              </Button>
+            ))}
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="feedback-message">
+              {type === "bug" ? "What happened, and what did you expect?" : "Your feedback"}
+            </Label>
+            <Textarea
+              id="feedback-message"
+              value={message}
+              onChange={(e) => setMessage(e.target.value)}
+              maxLength={FEEDBACK_MAX_LENGTH}
+              rows={6}
+              required
+            />
+            <p className="text-xs text-muted-foreground text-right">
+              {message.length}/{FEEDBACK_MAX_LENGTH}
+            </p>
+          </div>
+
+          <DialogFooter>
+            <Button type="submit" disabled={isSending || !message.trim()}>
+              {isSending ? "Sending..." : "Send"}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/components/dashboard/installAppCard.tsx

@@ -0,0 +1,187 @@
+'use client'
+
+import { useEffect, useState, type ReactNode } from 'react'
+import { CircleCheck, Download } from 'lucide-react'
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '../ui/card'
+import { Button } from '../ui/button'
+
+// Chrome/Edge's install event; not in the DOM typings yet.
+type InstallPromptEvent = Event & { prompt: () => Promise<{ outcome: 'accepted' | 'dismissed' }> }
+
+declare global {
+  interface Window {
+    // Stashed by app/layout.tsx in case the event fires before this card mounts.
+    __pwaInstallPrompt?: InstallPromptEvent
+  }
+}
+
+export type InstallTarget = {
+  os: 'ios' | 'android' | 'desktop'
+  browser: 'safari' | 'chrome' | 'edge' | 'firefox' | 'samsung' | 'other'
+}
+
+// iPadOS reports a Mac user agent, so touch support tells them apart.
+export function detectInstallTarget(ua: string, maxTouchPoints = 0): InstallTarget {
+  const ios = /iPhone|iPad|iPod/.test(ua) || (/Macintosh/.test(ua) && maxTouchPoints > 1)
+  const os = ios ? 'ios' : /Android/.test(ua) ? 'android' : 'desktop'
+  const browser = /SamsungBrowser/.test(ua)
+    ? 'samsung'
+    : /Edg(e|A|iOS)?\//.test(ua)
+      ? 'edge'
+      : /Firefox|FxiOS/.test(ua)
+        ? 'firefox'
+        : /OPR\/|Opera/.test(ua)
+          ? 'other'
+          : /Chrome|CriOS/.test(ua)
+            ? 'chrome'
+            : /Safari/.test(ua)
+              ? 'safari'
+              : 'other'
+  return { os, browser }
+}
+
+const BROWSER_NAMES: Record<InstallTarget['browser'], string> = {
+  safari: 'Safari',
+  chrome: 'Chrome',
+  edge: 'Edge',
+  firefox: 'Firefox',
+  samsung: 'Samsung Internet',
+  other: 'your browser',
+}
+const OS_NAMES: Record<InstallTarget['os'], string> = {
+  ios: 'iPhone / iPad',
+  android: 'Android',
+  desktop: 'this computer',
+}
+
+// Manual steps for each OS/browser, or null when the browser can't install apps.
+function steps({ os, browser }: InstallTarget): ReactNode[] | null {
+  if (os === 'ios') {
+    return [
+      browser === 'safari' ? (
+        <>Tap <strong>Share</strong> in the toolbar. It may be inside the <strong>⋯</strong> menu.</>
+      ) : (
+        <>Tap <strong>Share</strong> in the address bar or menu.</>
+      ),
+      <>Choose <strong>Add to Home Screen</strong>. Keep &ldquo;Open as Web App&rdquo; on if shown.</>,
+      <>Tap <strong>Add</strong>, then open the new icon on your home screen.</>,
+    ]
+  }
+  if (os === 'android') {
+    if (browser === 'samsung') {
+      return [
+        <>Tap the <strong>☰</strong> menu at the bottom right.</>,
+        <>Choose <strong>Add page to</strong> → <strong>Home screen</strong>.</>,
+      ]
+    }
+    return [
+      <>Tap the <strong>⋮</strong> menu at the top right.</>,
+      <>Choose <strong>Install app</strong> or <strong>Add to Home screen</strong>.</>,
+    ]
+  }
+  if (browser === 'chrome') {
+    return [
+      <>
+        Click the install icon at the right of the address bar, or open the <strong>⋮</strong> menu
+        and choose <strong>Cast, save and share</strong> → <strong>Install page as app</strong>.
+      </>,
+    ]
+  }
+  if (browser === 'edge') {
+    return [
+      <>
+        Click the install icon at the right of the address bar, or open the <strong>⋯</strong> menu
+        and choose <strong>Apps</strong> → <strong>Install this site as an app</strong>.
+      </>,
+    ]
+  }
+  if (browser === 'safari') {
+    return [<>Choose <strong>File</strong> → <strong>Add to Dock</strong> (macOS Sonoma or later).</>]
+  }
+  return null
+}
+
+// Install instructions for the visitor's own OS and browser, plus a one-click
+// Install button where the browser offers one (Chrome, Edge). Shows a
+// confirmation instead once the app runs installed.
+export default function InstallAppCard() {
+  const [target, setTarget] = useState<InstallTarget | undefined>()
+  const [installed, setInstalled] = useState(false)
+  const [prompt, setPrompt] = useState<InstallPromptEvent | undefined>()
+
+  useEffect(() => {
+    setTarget(detectInstallTarget(navigator.userAgent, navigator.maxTouchPoints))
+    setInstalled(
+      matchMedia('(display-mode: standalone)').matches ||
+        (navigator as Navigator & { standalone?: boolean }).standalone === true
+    )
+    setPrompt(window.__pwaInstallPrompt)
+
+    const onPrompt = (e: Event) => setPrompt(e as InstallPromptEvent)
+    const onInstalled = () => setInstalled(true)
+    addEventListener('beforeinstallprompt', onPrompt)
+    addEventListener('appinstalled', onInstalled)
+    return () => {
+      removeEventListener('beforeinstallprompt', onPrompt)
+      removeEventListener('appinstalled', onInstalled)
+    }
+  }, [])
+
+  async function install() {
+    if (!prompt) return
+    const { outcome } = await prompt.prompt()
+    // The event can only be used once.
+    window.__pwaInstallPrompt = undefined
+    setPrompt(undefined)
+    if (outcome === 'accepted') setInstalled(true)
+  }
+
+  // Rendered after mount only: the server can't see the visitor's device.
+  if (!target) return null
+  const list = steps(target)
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Install the app</CardTitle>
+        <CardDescription>
+          Open it from your home screen or dock, in its own window.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {installed ? (
+          <p className="flex items-center gap-2 text-sm">
+            <CircleCheck className="size-4 text-green-600" aria-hidden />
+            You&apos;re using the installed app on this device.
+          </p>
+        ) : (
+          <>
+            <p className="text-sm text-muted-foreground">
+              {BROWSER_NAMES[target.browser]} on {OS_NAMES[target.os]}
+            </p>
+            {prompt && (
+              <Button onClick={install}>
+                <Download aria-hidden /> Install app
+              </Button>
+            )}
+            {list ? (
+              <ol className="list-decimal space-y-2 pl-5 text-sm marker:text-muted-foreground">
+                {list.map((step, i) => (
+                  <li key={i}>{step}</li>
+                ))}
+              </ol>
+            ) : (
+              !prompt && (
+                <p className="text-sm">
+                  This browser can&apos;t install apps. Open this page in{' '}
+                  {target.os === 'desktop' ? 'Chrome, Edge, or Safari on a Mac' : 'Chrome'} to install
+                  it.
+                </p>
+              )
+            )}
+          </>
+        )}
+      </CardContent>
+    </Card>
+  )
+}

package/components/site/cookie-banner.tsx

@@ -0,0 +1,57 @@
+"use client"
+
+import Link from "next/link"
+import { useEffect, useState } from "react"
+
+// Relative imports: this file ships raw in the npm package, where `@/` would
+// resolve against the consuming project instead.
+import { Button } from "../ui/button"
+import { COOKIE_BANNER_ENABLED, setCookieConsent, useCookieConsent } from "../../lib/cookie-consent"
+
+// Mount once in the root layout. Shows until the visitor picks an option;
+// "Necessary only" is as prominent as "Accept all" on purpose — GDPR requires
+// rejecting to be as easy as accepting.
+export function CookieBanner() {
+  const consent = useCookieConsent()
+  // useCookieConsent() is null on the server *and* before a choice, so wait
+  // for mount to tell them apart — otherwise returning visitors see a flash.
+  const [mounted, setMounted] = useState(false)
+  useEffect(() => setMounted(true), [])
+
+  if (!COOKIE_BANNER_ENABLED || !mounted || consent) return null
+
+  return (
+    <div
+      role="dialog"
+      aria-live="polite"
+      aria-label="Cookie consent"
+      className="fixed inset-x-4 bottom-4 z-50 mx-auto max-w-lg rounded-lg border border-border bg-background p-4 shadow-lg"
+    >
+      <p className="text-sm text-muted-foreground">
+        We use necessary cookies to keep you signed in. With your permission we also use a device
+        fingerprint to detect suspicious sign-ins, and Google One Tap sign-in.{" "}
+        <Link href="/privacy" className="underline underline-offset-4 hover:text-foreground">
+          Privacy policy
+        </Link>
+      </p>
+      <div className="mt-3 flex justify-end gap-2">
+        <Button variant="outline" size="sm" onClick={() => setCookieConsent("necessary")}>
+          Necessary only
+        </Button>
+        <Button size="sm" onClick={() => setCookieConsent("all")}>
+          Accept all
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+// Withdrawing consent must be as easy as giving it — this reopens the banner.
+export function CookieSettingsButton({ className }: { className?: string }) {
+  if (!COOKIE_BANNER_ENABLED) return null
+  return (
+    <button type="button" className={className} onClick={() => setCookieConsent(null)}>
+      Cookie settings
+    </button>
+  )
+}

package/components/ui/button.tsx

@@ -2,7 +2,7 @@ import * as React from "react"
 import { cva, type VariantProps } from "class-variance-authority"
 import { Slot } from "radix-ui"
 
-import { cn } from "@/lib/utils"
+import { cn } from "../../lib/utils"
 
 const buttonVariants = cva(
   "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",