Merge remote-tracking branch 'origin/main'
# Conflicts: # db/custom.db # src/components/FuseButton.tsx # src/components/SlideCommit.tsx
This commit is contained in:
Z User committed
commit
58521ca03a
23 files changed
+2622
-26
No files matched your search
@@ -0,0 +1,103 @@
|
||||
import { NextResponse } from 'next/server'
|
||||
import { db } from '@/lib/db'
|
||||
import { storeFile, detectContentType } from '@/lib/storage'
|
||||
import { z } from 'zod'
|
||||
import { checkRateLimit } from '@/lib/rate-limit'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
export const maxDuration = 30
|
||||
|
||||
// POST /api/aos/belege/upload
|
||||
// Upload a receipt file with content-addressed storage (PRD §5.5 + §5.7 Belege).
|
||||
// Accepts multipart/form-data with file + metadata.
|
||||
export async function POST(req: Request) {
|
||||
try {
|
||||
const rateLimited = checkRateLimit(req, 'public')
|
||||
if (rateLimited) return rateLimited
|
||||
|
||||
const formData = await req.formData()
|
||||
const file = formData.get('file') as File | null
|
||||
const type = formData.get('type') as string | null
|
||||
const vendor = formData.get('vendor') as string | null
|
||||
const invoiceNumber = formData.get('invoiceNumber') as string | null
|
||||
const amountCentsStr = formData.get('amountCents') as string | null
|
||||
const bookingDateStr = formData.get('bookingDate') as string | null
|
||||
|
||||
if (!file) {
|
||||
return NextResponse.json({ error: 'file required (multipart/form-data, field name: file)' }, { status: 400 })
|
||||
}
|
||||
|
||||
// Read file content
|
||||
const arrayBuffer = await file.arrayBuffer()
|
||||
const buffer = Buffer.from(arrayBuffer)
|
||||
|
||||
// Detect content type from magic bytes
|
||||
const detectedType = detectContentType(buffer)
|
||||
const fileName = file.name
|
||||
const fileType = file.type || detectedType
|
||||
const fileSizeBytes = buffer.length
|
||||
|
||||
// Store file (content-addressed, dedup, atomic write)
|
||||
const stored = await storeFile(buffer, fileType)
|
||||
|
||||
// Check for duplicate (same hash = same file already registered as Beleg)
|
||||
const existing = await db.beleg.findUnique({ where: { fileHash: stored.hash } })
|
||||
if (existing) {
|
||||
return NextResponse.json({
|
||||
beleg: existing,
|
||||
duplicate: true,
|
||||
message: 'File already registered (same SHA-256 hash)',
|
||||
}, { status: 409 })
|
||||
}
|
||||
|
||||
// Create Beleg record
|
||||
const count = await db.beleg.count()
|
||||
const number = `BEL-2026-${String(count + 1).padStart(4, '0')}`
|
||||
const belegType = type || 'sonstiges'
|
||||
|
||||
// GoBD retention: 8 years for invoices, 6 for business letters
|
||||
const retentionUntil = new Date()
|
||||
retentionUntil.setFullYear(retentionUntil.getFullYear() + (belegType.includes('rechnung') ? 8 : 6))
|
||||
|
||||
const beleg = await db.beleg.create({
|
||||
data: {
|
||||
number,
|
||||
type: belegType,
|
||||
fileHash: stored.hash,
|
||||
fileName,
|
||||
fileType,
|
||||
fileSizeBytes,
|
||||
vendor: vendor ?? null,
|
||||
invoiceNumber: invoiceNumber ?? null,
|
||||
amountCents: amountCentsStr ? parseInt(amountCentsStr) : null,
|
||||
bookingDate: bookingDateStr ? new Date(bookingDateStr) : null,
|
||||
retentionUntil,
|
||||
},
|
||||
})
|
||||
|
||||
await db.auditLog.create({
|
||||
data: {
|
||||
actor: 'nora@nordlicht.digital',
|
||||
action: 'beleg.upload',
|
||||
entity: 'Beleg',
|
||||
entityId: beleg.id,
|
||||
after: JSON.stringify({ number, type: belegType, fileName, hash: stored.hash.slice(0, 16) + '…', sizeBytes: fileSizeBytes }),
|
||||
hash: 'sha256:' + Math.random().toString(36).slice(2),
|
||||
},
|
||||
})
|
||||
|
||||
return NextResponse.json({
|
||||
beleg,
|
||||
storage: {
|
||||
hash: stored.hash,
|
||||
sizeBytes: stored.size,
|
||||
contentType: stored.contentType,
|
||||
detectedType,
|
||||
deduped: stored.size !== fileSizeBytes, // if size differs, existing file was returned
|
||||
},
|
||||
})
|
||||
} catch (err) {
|
||||
const msg = err instanceof Error ? err.message : 'internal server error'
|
||||
return NextResponse.json({ error: msg }, { status: 500 })
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,165 @@
|
||||
import { NextResponse } from 'next/server'
|
||||
import { db } from '@/lib/db'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
export const maxDuration = 15
|
||||
|
||||
// GET /api/aos/invoices/[id]/pdf
|
||||
// Generates a real PDF invoice (German layout) using HTML → print-ready format.
|
||||
// Returns the invoice as an HTML page that browsers can "Print to PDF".
|
||||
// In production, this would use Typst (PRD §5.2) for server-side PDF generation.
|
||||
export async function GET(
|
||||
_req: Request,
|
||||
{ params }: { params: Promise<{ id: string }> }
|
||||
) {
|
||||
try {
|
||||
const { id } = await params
|
||||
|
||||
const invoice = await db.invoice.findUnique({
|
||||
where: { id },
|
||||
include: { company: true, lines: true },
|
||||
})
|
||||
|
||||
if (!invoice) {
|
||||
return NextResponse.json({ error: 'invoice not found' }, { status: 404 })
|
||||
}
|
||||
|
||||
// Get agency settings for the invoice header
|
||||
const settings = await db.setting.findMany()
|
||||
const getSetting = (key: string) => settings.find((s) => s.key === key)?.value ?? ''
|
||||
|
||||
const agencyName = getSetting('company.name') || 'Nordlicht Digital GmbH'
|
||||
const agencyLegalForm = getSetting('company.legalForm') || 'GmbH'
|
||||
const agencyVatId = getSetting('company.vatId') || ''
|
||||
const agencyRegisterCourt = getSetting('company.registerCourt') || ''
|
||||
const agencyRegisterNumber = getSetting('company.registerNumber') || ''
|
||||
const agencyCity = getSetting('company.city') || ''
|
||||
const agencyBank = getSetting('company.bank') || ''
|
||||
const agencyBic = getSetting('company.bic') || ''
|
||||
|
||||
// Generate German invoice HTML (print-ready)
|
||||
const html = generateInvoiceHTML({
|
||||
invoice,
|
||||
agency: { name: agencyName, legalForm: agencyLegalForm, vatId: agencyVatId, registerCourt: agencyRegisterCourt, registerNumber: agencyRegisterNumber, city: agencyCity, bank: agencyBank, bic: agencyBic },
|
||||
})
|
||||
|
||||
return new Response(html, {
|
||||
headers: {
|
||||
'content-type': 'text/html; charset=utf-8',
|
||||
'content-disposition': `inline; filename="${invoice.number}.html"`,
|
||||
'cache-control': 'no-store',
|
||||
},
|
||||
})
|
||||
} catch (err) {
|
||||
const msg = err instanceof Error ? err.message : 'internal server error'
|
||||
return NextResponse.json({ error: msg }, { status: 500 })
|
||||
}
|
||||
}
|
||||
|
||||
function generateInvoiceHTML({ invoice, agency }: {
|
||||
invoice: {
|
||||
number: string; status: string; type: string; issueDate: Date; dueDate: Date;
|
||||
netCents: number; taxBp: number; grossCents: number;
|
||||
zugferd: boolean; xrechnung: boolean;
|
||||
company: { name: string; legalForm: string | null; city: string | null; vatId: string | null };
|
||||
lines: { description: string; quantity: number; unitCents: number; totalCents: number }[];
|
||||
};
|
||||
agency: { name: string; legalForm: string; vatId: string; registerCourt: string; registerNumber: string; city: string; bank: string; bic: string };
|
||||
}): string {
|
||||
const fmtDate = (d: Date) => d.toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' })
|
||||
const fmtEuro = (cents: number) => (cents / 100).toLocaleString('de-DE', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + ' €'
|
||||
const taxPct = (invoice.taxBp / 100).toFixed(0)
|
||||
|
||||
return `<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Rechnung ${invoice.number}</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { font-family: -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; color: #111; line-height: 1.6; padding: 40px; max-width: 800px; margin: 0 auto; }
|
||||
.header { display: flex; justify-content: space-between; margin-bottom: 40px; }
|
||||
.agency h1 { font-size: 18px; font-weight: 700; }
|
||||
.agency p { font-size: 12px; color: #666; }
|
||||
.invoice-meta { text-align: right; }
|
||||
.invoice-meta h2 { font-size: 24px; font-weight: 700; margin-bottom: 8px; }
|
||||
.invoice-meta p { font-size: 12px; color: #666; }
|
||||
.customer { margin-bottom: 30px; }
|
||||
.customer h3 { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
|
||||
.customer p { font-size: 13px; color: #333; }
|
||||
table { width: 100%; border-collapse: collapse; margin-bottom: 30px; }
|
||||
th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: #999; border-bottom: 2px solid #111; padding: 8px; }
|
||||
td { font-size: 13px; padding: 10px 8px; border-bottom: 1px solid #eee; }
|
||||
.right { text-align: right; }
|
||||
.totals { width: 300px; margin-left: auto; }
|
||||
.totals td { border: none; padding: 6px 8px; font-size: 13px; }
|
||||
.totals .total { font-weight: 700; font-size: 16px; border-top: 2px solid #111; padding-top: 10px; }
|
||||
.footer { margin-top: 40px; padding-top: 20px; border-top: 1px solid #eee; font-size: 11px; color: #999; }
|
||||
.footer p { margin-bottom: 4px; }
|
||||
@media print { body { padding: 0; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<div class="agency">
|
||||
<h1>${agency.name}</h1>
|
||||
<p>${agency.city}</p>
|
||||
<p>USt-IdNr.: ${agency.vatId}</p>
|
||||
<p>${agency.registerCourt} ${agency.registerNumber}</p>
|
||||
</div>
|
||||
<div class="invoice-meta">
|
||||
<h2>RECHNUNG</h2>
|
||||
<p>Nr.: ${invoice.number}</p>
|
||||
<p>Datum: ${fmtDate(invoice.issueDate)}</p>
|
||||
<p>Fällig: ${fmtDate(invoice.dueDate)}</p>
|
||||
${invoice.zugferd ? '<p style="font-weight:600">✓ ZUGFeRD</p>' : ''}
|
||||
${invoice.xrechnung ? '<p style="font-weight:600">✓ XRechnung</p>' : ''}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="customer">
|
||||
<h3>Rechnungsempfänger</h3>
|
||||
<p><strong>${invoice.company.name}</strong></p>
|
||||
${invoice.company.legalForm ? `<p>${invoice.company.legalForm}</p>` : ''}
|
||||
${invoice.company.city ? `<p>${invoice.company.city}</p>` : ''}
|
||||
${invoice.company.vatId ? `<p>USt-IdNr.: ${invoice.company.vatId}</p>` : ''}
|
||||
</div>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Beschreibung</th>
|
||||
<th class="right">Menge</th>
|
||||
<th class="right">Einzelpreis</th>
|
||||
<th class="right">Gesamt</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
${invoice.lines.map((l) => `
|
||||
<tr>
|
||||
<td>${l.description}</td>
|
||||
<td class="right">${l.quantity}</td>
|
||||
<td class="right">${fmtEuro(l.unitCents)}</td>
|
||||
<td class="right">${fmtEuro(l.totalCents)}</td>
|
||||
</tr>`).join('')}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<table class="totals">
|
||||
<tr><td>Netto</td><td class="right">${fmtEuro(invoice.netCents)}</td></tr>
|
||||
<tr><td>USt (${taxPct}%)</td><td class="right">${fmtEuro(invoice.grossCents - invoice.netCents)}</td></tr>
|
||||
<tr class="total"><td>Gesamt</td><td class="right">${fmtEuro(invoice.grossCents)}</td></tr>
|
||||
</table>
|
||||
|
||||
<div class="footer">
|
||||
<p><strong>${agency.name}</strong> · ${agency.city}</p>
|
||||
<p>Bank: ${agency.bank}</p>
|
||||
<p>BIC: ${agency.bic}</p>
|
||||
<p>USt-IdNr.: ${agency.vatId}</p>
|
||||
<p>Register: ${agency.registerCourt} ${agency.registerNumber}</p>
|
||||
<p style="margin-top:10px">Rechnung Nr. ${invoice.number} vom ${fmtDate(invoice.issueDate)}. Fällig bis ${fmtDate(invoice.dueDate)}.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>`
|
||||
}
|
||||
@@ -0,0 +1,159 @@
|
||||
import { NextResponse } from 'next/server'
|
||||
import { db } from '@/lib/db'
|
||||
import { createHmac } from 'crypto'
|
||||
import { checkRateLimit } from '@/lib/rate-limit'
|
||||
|
||||
export const dynamic = 'force-dynamic'
|
||||
|
||||
// POST /api/aos/webhooks/github
|
||||
// GitHub/Gitea webhook receiver (PRD §6.3: "GitHub/Gitea webhooks (commits and PRs linked to tasks)")
|
||||
//
|
||||
// Receives push events and PR events from GitHub, extracts commit messages,
|
||||
// and links them to tasks by matching "#TASK-XXXX" references in commit messages.
|
||||
//
|
||||
// Security: verifies X-Hub-Signature-256 HMAC using GITHUB_WEBHOOK_SECRET env var.
|
||||
export async function POST(req: Request) {
|
||||
try {
|
||||
const rateLimited = checkRateLimit(req, 'webhook')
|
||||
if (rateLimited) return rateLimited
|
||||
|
||||
const eventType = req.headers.get('x-github-event') ?? ''
|
||||
const signature = req.headers.get('x-hub-signature-256') ?? ''
|
||||
const body = await req.text()
|
||||
|
||||
// Verify HMAC signature if secret is configured
|
||||
const secret = process.env.GITHUB_WEBHOOK_SECRET
|
||||
if (secret) {
|
||||
const expected = 'sha256=' + createHmac('sha256', secret).update(body).digest('hex')
|
||||
if (signature !== expected) {
|
||||
return NextResponse.json({ error: 'invalid signature' }, { status: 401 })
|
||||
}
|
||||
}
|
||||
|
||||
const payload = JSON.parse(body)
|
||||
const repo = payload.repository?.full_name ?? 'unknown'
|
||||
|
||||
if (eventType === 'push') {
|
||||
// Push event: extract commits and link to tasks
|
||||
const commits = payload.commits ?? []
|
||||
const linkedTasks: { commit: string; message: string; taskId: string; taskTitle: string }[] = []
|
||||
|
||||
for (const commit of commits) {
|
||||
const message = commit.message ?? ''
|
||||
const sha = (commit.id ?? '').slice(0, 7)
|
||||
|
||||
// Match task references in commit message: #TKT-2026-XXXX or task:<id>
|
||||
const taskMatches = message.match(/(?:#TKT-2026-|task:)([a-z0-9]+)/gi) ?? []
|
||||
|
||||
for (const match of taskMatches) {
|
||||
const taskId = match.replace(/#TKT-2026-|task:/i, '').trim()
|
||||
|
||||
// Try to find the task by ID or by searching for the reference
|
||||
const task = await db.task.findFirst({
|
||||
where: { id: { contains: taskId } },
|
||||
include: { project: { select: { name: true } } },
|
||||
})
|
||||
|
||||
if (task) {
|
||||
// Add a comment to the task with the commit reference
|
||||
await db.taskComment.create({
|
||||
data: {
|
||||
taskId: task.id,
|
||||
author: `GitHub (${payload.pusher?.name ?? 'unknown'})`,
|
||||
body: `Commit ${sha} in ${repo}:\n${message.split('\n')[0]}\n\nLink: ${payload.repository?.html_url}/commit/${commit.id}`,
|
||||
},
|
||||
})
|
||||
|
||||
linkedTasks.push({
|
||||
commit: sha,
|
||||
message: message.split('\n')[0],
|
||||
taskId: task.id,
|
||||
taskTitle: task.title,
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
await db.auditLog.create({
|
||||
data: {
|
||||
actor: 'system:github-webhook',
|
||||
action: 'webhook.github:push',
|
||||
entity: 'Task',
|
||||
entityId: 'batch',
|
||||
after: JSON.stringify({ repo, commits: commits.length, linked: linkedTasks.length }),
|
||||
hash: 'sha256:' + Math.random().toString(36).slice(2),
|
||||
},
|
||||
})
|
||||
|
||||
return NextResponse.json({
|
||||
ok: true,
|
||||
event: 'push',
|
||||
repo,
|
||||
commits: commits.length,
|
||||
linkedTasks: linkedTasks.length,
|
||||
links: linkedTasks,
|
||||
})
|
||||
}
|
||||
|
||||
if (eventType === 'pull_request') {
|
||||
// PR event: link PR to project
|
||||
const pr = payload.pull_request ?? {}
|
||||
const action = payload.action ?? 'opened'
|
||||
const prTitle = pr.title ?? 'Unknown PR'
|
||||
const prNumber = pr.number ?? 0
|
||||
const prUrl = pr.html_url ?? ''
|
||||
const branch = pr.head?.ref ?? ''
|
||||
|
||||
// Try to match project by branch name (e.g. "feature/intranet-portal" → Intranet-Portal)
|
||||
const project = await db.project.findFirst({
|
||||
where: { name: { contains: branch.replace(/feature\/|fix\//g, '').replace(/-/g, ' ') } },
|
||||
})
|
||||
|
||||
if (project) {
|
||||
await db.auditLog.create({
|
||||
data: {
|
||||
actor: 'system:github-webhook',
|
||||
action: 'webhook.github:pr',
|
||||
entity: 'Project',
|
||||
entityId: project.id,
|
||||
after: JSON.stringify({ prNumber, prTitle, prUrl, action, branch, repo }),
|
||||
hash: 'sha256:' + Math.random().toString(36).slice(2),
|
||||
},
|
||||
})
|
||||
|
||||
return NextResponse.json({
|
||||
ok: true,
|
||||
event: 'pull_request',
|
||||
action,
|
||||
repo,
|
||||
prNumber,
|
||||
prTitle,
|
||||
branch,
|
||||
linkedProject: project.name,
|
||||
})
|
||||
}
|
||||
|
||||
return NextResponse.json({
|
||||
ok: true,
|
||||
event: 'pull_request',
|
||||
action,
|
||||
repo,
|
||||
prNumber,
|
||||
prTitle,
|
||||
branch,
|
||||
linkedProject: null,
|
||||
note: 'No matching project found for this branch',
|
||||
})
|
||||
}
|
||||
|
||||
// Unknown event type
|
||||
return NextResponse.json({
|
||||
ok: true,
|
||||
event: eventType,
|
||||
note: `Event type '${eventType}' received but not processed`,
|
||||
})
|
||||
} catch (err) {
|
||||
const msg = err instanceof Error ? err.message : 'internal server error'
|
||||
return NextResponse.json({ error: msg }, { status: 500 })
|
||||
}
|
||||
}
|
||||
@@ -48,6 +48,15 @@ export const metadata: Metadata = {
|
||||
},
|
||||
};
|
||||
|
||||
// PRD §5.6: suppressHydrationWarning on html + body because we use:
|
||||
// 1. next-themes (class on <html> changes client-side)
|
||||
// 2. Zustand persist (view/locale loaded from localStorage client-side)
|
||||
// 3. Radix UI generates IDs with useId() which differ between server and client
|
||||
// (this is expected and the warning is cosmetic — Radix components still work correctly)
|
||||
// The alternative would be to delay rendering until after hydration (mount gate),
|
||||
// but that causes a flash of unstyled content. suppressHydrationWarning is the
|
||||
// official next-themes + Radix pattern.
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
@@ -57,6 +66,7 @@ export default function RootLayout({
|
||||
<html lang="de" suppressHydrationWarning>
|
||||
<body
|
||||
className={`${geistSans.variable} ${geistMono.variable} antialiased bg-background text-foreground`}
|
||||
suppressHydrationWarning
|
||||
>
|
||||
<ThemeProvider attribute="class" defaultTheme="light" enableSystem={false}>
|
||||
{children}
|
||||
|
||||
@@ -0,0 +1,530 @@
|
||||
'use client';
|
||||
|
||||
import React, { useCallback, useEffect, useId, useMemo, useRef, useState, type CSSProperties } from 'react';
|
||||
import {
|
||||
animate,
|
||||
motion,
|
||||
motionValue,
|
||||
useMotionValue,
|
||||
useReducedMotion,
|
||||
useTransform,
|
||||
type MotionValue
|
||||
} from 'motion/react';
|
||||
import { HugeiconsIcon } from '@hugeicons/react';
|
||||
import { Tick02Icon } from '@hugeicons/core-free-icons';
|
||||
|
||||
const EASE_OUT: [number, number, number, number] = [0.23, 1, 0.32, 1];
|
||||
const WASH_IN = 0.3;
|
||||
const WASH_OUT = 0.2;
|
||||
const SINK_DELAY = 0.06;
|
||||
const SINK_STEP = 0.03;
|
||||
const CHECK_DELAY = 0.28;
|
||||
const CHECK_RISE = 8;
|
||||
const SINK_FADE = 0.6;
|
||||
|
||||
export type CodeSlotsStatus = 'idle' | 'error' | 'success';
|
||||
|
||||
export interface CodeSlotsProps {
|
||||
length?: number;
|
||||
value?: string;
|
||||
defaultValue?: string;
|
||||
onChange?: (code: string) => void;
|
||||
onComplete?: (code: string) => void;
|
||||
status?: CodeSlotsStatus;
|
||||
mask?: boolean;
|
||||
caret?: boolean;
|
||||
disabled?: boolean;
|
||||
autoFocus?: boolean;
|
||||
accentColor?: string;
|
||||
inkColor?: string;
|
||||
slotColor?: string;
|
||||
digitColor?: string;
|
||||
dangerColor?: string;
|
||||
slotSize?: number;
|
||||
gap?: number;
|
||||
radius?: number;
|
||||
bounce?: number;
|
||||
settle?: number;
|
||||
rise?: number;
|
||||
cascade?: number;
|
||||
ariaLabel?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
interface Live {
|
||||
settle: number;
|
||||
bounce: number;
|
||||
cascade: number;
|
||||
reduce: boolean | null;
|
||||
}
|
||||
|
||||
interface SlotProps {
|
||||
mv: MotionValue<number>;
|
||||
drop: MotionValue<number>;
|
||||
char: string;
|
||||
active: boolean;
|
||||
rise: number;
|
||||
sink: number;
|
||||
}
|
||||
|
||||
const clamp01 = (v: number) => Math.min(1, Math.max(0, v));
|
||||
const digitsOf = (raw: string | undefined) => String(raw ?? '').replace(/\D/g, '');
|
||||
const toSlots = (raw: string | undefined, n: number) => {
|
||||
const d = digitsOf(raw).slice(0, n);
|
||||
return Array.from({ length: n }, (_, i) => d[i] ?? '');
|
||||
};
|
||||
const firstEmptyOf = (slots: string[]) => {
|
||||
const i = slots.indexOf('');
|
||||
return i === -1 ? slots.length - 1 : i;
|
||||
};
|
||||
const isFull = (slots: string[]) => slots.every(Boolean);
|
||||
const STYLE = '@keyframes code-slots-blink{0%,49.9%{opacity:1}50%,100%{opacity:0}}';
|
||||
|
||||
const CodeSlots: React.FC<CodeSlotsProps> = ({
|
||||
length = 6,
|
||||
value,
|
||||
defaultValue = '',
|
||||
onChange,
|
||||
onComplete,
|
||||
status = 'idle',
|
||||
mask = false,
|
||||
caret = true,
|
||||
disabled = false,
|
||||
autoFocus = false,
|
||||
accentColor = '#f5f5f5',
|
||||
inkColor = '#f5f5f5',
|
||||
slotColor = '#27272a',
|
||||
digitColor = '#18181b',
|
||||
dangerColor = '#ff3b30',
|
||||
slotSize = 44,
|
||||
gap = 8,
|
||||
radius = 12,
|
||||
bounce = 0.2,
|
||||
settle = 0.3,
|
||||
rise = 8,
|
||||
cascade = 20,
|
||||
ariaLabel = 'One-time code',
|
||||
className = ''
|
||||
}) => {
|
||||
const uid = useId();
|
||||
const reduce = useReducedMotion();
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const rowRef = useRef<HTMLDivElement>(null);
|
||||
const [slots, setSlots] = useState(() => toSlots(value ?? defaultValue, length));
|
||||
const [active, setActive] = useState(() => firstEmptyOf(slots));
|
||||
const [focused, setFocused] = useState(false);
|
||||
const [veiled, setVeiled] = useState(status === 'success');
|
||||
const activeMv = useMotionValue(active);
|
||||
const openMv = useMotionValue(status === 'success' ? 1 : 0);
|
||||
const checkMv = useMotionValue(status === 'success' ? 1 : 0);
|
||||
const glide = useRef<Set<number>>(new Set());
|
||||
const target = useRef<number[]>([]);
|
||||
const draining = useRef(false);
|
||||
const drainTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
|
||||
const statusRef = useRef(status);
|
||||
const emitted = useRef(digitsOf(value ?? defaultValue).slice(0, length));
|
||||
const slotsRef = useRef(slots);
|
||||
slotsRef.current = slots;
|
||||
const live = useRef<Live>({} as Live);
|
||||
live.current = { settle, bounce, cascade, reduce };
|
||||
|
||||
const springs = useMemo(
|
||||
() => ({
|
||||
mvs: Array.from({ length }, (_, i) => motionValue(slotsRef.current[i] ? 1 : 0)),
|
||||
drops: Array.from({ length }, () => motionValue(statusRef.current === 'success' ? 1 : 0))
|
||||
}),
|
||||
[length]
|
||||
);
|
||||
const { mvs, drops } = springs;
|
||||
const pitch = slotSize + gap;
|
||||
const height = Math.round(slotSize * 1.18);
|
||||
const washRadius = Math.min(radius, slotSize / 2);
|
||||
|
||||
const drive = useCallback(
|
||||
(i: number, to: number, delayMs = 0) => {
|
||||
const mv = mvs[i];
|
||||
if (!mv) return;
|
||||
target.current[i] = to;
|
||||
const L = live.current;
|
||||
if (L.reduce) {
|
||||
mv.jump(to);
|
||||
return;
|
||||
}
|
||||
animate(mv, to, { type: 'spring', duration: L.settle, bounce: L.bounce, delay: delayMs / 1000 });
|
||||
},
|
||||
[mvs]
|
||||
);
|
||||
const land = useCallback(
|
||||
(i: number, delayMs = 0) => {
|
||||
if (mvs[i].get() > 0) mvs[i].jump(0);
|
||||
drive(i, 1, delayMs);
|
||||
},
|
||||
[mvs, drive]
|
||||
);
|
||||
const moveActive = useCallback(
|
||||
(next: number, crossed: number[]) => {
|
||||
crossed.forEach(j => glide.current.add(j));
|
||||
activeMv.jump(next);
|
||||
setActive(next);
|
||||
},
|
||||
[activeMv]
|
||||
);
|
||||
const jumpActive = useCallback(
|
||||
(next: number) => {
|
||||
glide.current.clear();
|
||||
activeMv.jump(next);
|
||||
setActive(next);
|
||||
},
|
||||
[activeMv]
|
||||
);
|
||||
|
||||
const caretX = useTransform(() => {
|
||||
const a = activeMv.get();
|
||||
let x = a * pitch;
|
||||
for (let j = 0; j < mvs.length; j++) {
|
||||
const h = clamp01(mvs[j].get());
|
||||
if (!glide.current.has(j)) continue;
|
||||
const to = target.current[j];
|
||||
if (to === undefined || h === clamp01(to)) {
|
||||
glide.current.delete(j);
|
||||
continue;
|
||||
}
|
||||
x += j < a ? -(1 - h) * pitch : h * pitch;
|
||||
}
|
||||
return Math.min(Math.max(x, 0), (mvs.length - 1) * pitch);
|
||||
});
|
||||
const caretTransform = useTransform(caretX, (x: number) => `translateX(${x}px)`);
|
||||
const washClip = useTransform(openMv, (o: number) => `inset(0 ${(1 - clamp01(o)) * 50}% round ${washRadius}px)`);
|
||||
const checkTransform = useTransform(
|
||||
checkMv,
|
||||
(c: number) => `translateY(${(1 - c) * CHECK_RISE}px) scale(${0.85 + 0.15 * Math.max(c, 0)})`
|
||||
);
|
||||
const checkOpacity = useTransform(checkMv, clamp01);
|
||||
|
||||
const commit = useCallback(
|
||||
(next: string[]) => {
|
||||
const prev = slotsRef.current;
|
||||
slotsRef.current = next;
|
||||
setSlots(next);
|
||||
const code = next.join('');
|
||||
emitted.current = code;
|
||||
onChange?.(code);
|
||||
if (!isFull(prev) && isFull(next)) onComplete?.(code);
|
||||
},
|
||||
[onChange, onComplete]
|
||||
);
|
||||
|
||||
const insert = (raw: string, from = active) => {
|
||||
const digits = digitsOf(raw);
|
||||
if (!digits) return;
|
||||
const next = [...slotsRef.current];
|
||||
const crossed: number[] = [];
|
||||
const step = reduce ? 0 : cascade;
|
||||
let i = from;
|
||||
for (const ch of digits) {
|
||||
if (i >= length) break;
|
||||
next[i] = ch;
|
||||
land(i, (i - from) * step);
|
||||
crossed.push(i);
|
||||
i += 1;
|
||||
}
|
||||
if (!crossed.length) return;
|
||||
commit(next);
|
||||
moveActive(Math.min(i, length - 1), crossed);
|
||||
};
|
||||
const clearSlot = (i: number, stepBack = false) => {
|
||||
if (!slotsRef.current[i]) {
|
||||
if (stepBack) jumpActive(i);
|
||||
return;
|
||||
}
|
||||
const next = [...slotsRef.current];
|
||||
next[i] = '';
|
||||
drive(i, 0);
|
||||
commit(next);
|
||||
if (stepBack) moveActive(i, [i]);
|
||||
};
|
||||
|
||||
const busy = disabled || draining.current || status === 'success';
|
||||
const onKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
if (busy || e.metaKey || e.ctrlKey || e.altKey) return;
|
||||
const k = e.key;
|
||||
if (/^[0-9]$/.test(k)) {
|
||||
e.preventDefault();
|
||||
insert(k);
|
||||
} else if (k === 'Backspace') {
|
||||
e.preventDefault();
|
||||
if (slots[active]) clearSlot(active);
|
||||
else if (active > 0) clearSlot(active - 1, true);
|
||||
} else if (k === 'Delete') {
|
||||
e.preventDefault();
|
||||
clearSlot(active);
|
||||
} else if (k === 'ArrowLeft') {
|
||||
e.preventDefault();
|
||||
jumpActive(Math.max(active - 1, 0));
|
||||
} else if (k === 'ArrowRight') {
|
||||
e.preventDefault();
|
||||
jumpActive(Math.min(active + 1, length - 1));
|
||||
} else if (k === 'Home') {
|
||||
e.preventDefault();
|
||||
jumpActive(0);
|
||||
} else if (k === 'End') {
|
||||
e.preventDefault();
|
||||
jumpActive(length - 1);
|
||||
}
|
||||
};
|
||||
const onPaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
|
||||
if (busy) return;
|
||||
e.preventDefault();
|
||||
insert(e.clipboardData.getData('text'));
|
||||
};
|
||||
const onInput = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (busy) return;
|
||||
const d = digitsOf(e.target.value);
|
||||
if (!d) return;
|
||||
insert(d, d.length === 1 ? active : 0);
|
||||
};
|
||||
const onRowMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
|
||||
if (disabled) return;
|
||||
e.preventDefault();
|
||||
const row = rowRef.current;
|
||||
if (row && !draining.current && status !== 'success') {
|
||||
const rect = row.getBoundingClientRect();
|
||||
const zoom = rect.width / (row.offsetWidth || rect.width) || 1;
|
||||
const i = Math.floor((e.clientX - rect.left) / zoom / pitch);
|
||||
jumpActive(Math.max(0, Math.min(i, firstEmptyOf(slotsRef.current))));
|
||||
}
|
||||
inputRef.current?.focus();
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
glide.current.clear();
|
||||
target.current = [];
|
||||
const next = Array.from({ length }, (_, i) => slotsRef.current[i] ?? '');
|
||||
slotsRef.current = next;
|
||||
setSlots(next);
|
||||
jumpActive(firstEmptyOf(next));
|
||||
const code = next.join('');
|
||||
if (code !== emitted.current) {
|
||||
emitted.current = code;
|
||||
onChange?.(code);
|
||||
}
|
||||
}, [length]);
|
||||
|
||||
useEffect(() => {
|
||||
if (value === undefined) return;
|
||||
const clean = digitsOf(value).slice(0, length);
|
||||
if (clean === emitted.current) return;
|
||||
emitted.current = clean;
|
||||
const prev = slotsRef.current;
|
||||
const next = toSlots(clean, length);
|
||||
const hidden = statusRef.current === 'success';
|
||||
const landing: number[] = [];
|
||||
const leaving: number[] = [];
|
||||
next.forEach((ch, i) => {
|
||||
if (ch === prev[i]) return;
|
||||
(ch ? landing : leaving).push(i);
|
||||
});
|
||||
const step = live.current.reduce || hidden ? 0 : live.current.cascade;
|
||||
landing.forEach((i, k) => land(i, k * step));
|
||||
leaving.reverse().forEach((i, k) => {
|
||||
if (hidden) {
|
||||
target.current[i] = 0;
|
||||
mvs[i].jump(0);
|
||||
drops[i].jump(0);
|
||||
} else drive(i, 0, k * step);
|
||||
});
|
||||
slotsRef.current = next;
|
||||
setSlots(next);
|
||||
moveActive(firstEmptyOf(next), [...landing, ...leaving]);
|
||||
if (!isFull(prev) && isFull(next)) onComplete?.(clean);
|
||||
}, [value, length]);
|
||||
|
||||
useEffect(() => {
|
||||
const was = statusRef.current;
|
||||
const L = live.current;
|
||||
if (status === 'success') {
|
||||
setVeiled(true);
|
||||
if (L.reduce) {
|
||||
openMv.jump(1);
|
||||
drops.forEach(d => d.jump(1));
|
||||
checkMv.jump(1);
|
||||
return;
|
||||
}
|
||||
animate(openMv, 1, { duration: WASH_IN, ease: EASE_OUT });
|
||||
drops.forEach((d, k) =>
|
||||
animate(d, 1, { type: 'spring', duration: 0.3, bounce: 0, delay: SINK_DELAY + k * SINK_STEP })
|
||||
);
|
||||
animate(checkMv, 1, { type: 'spring', duration: 0.35, bounce: L.bounce, delay: CHECK_DELAY });
|
||||
return;
|
||||
}
|
||||
if (was !== 'success') return;
|
||||
if (L.reduce) {
|
||||
openMv.jump(0);
|
||||
checkMv.jump(0);
|
||||
drops.forEach(d => d.jump(0));
|
||||
setVeiled(false);
|
||||
return;
|
||||
}
|
||||
animate(checkMv, 0, { duration: 0.15, ease: EASE_OUT });
|
||||
animate(openMv, 0, { duration: WASH_OUT, ease: EASE_OUT, delay: 0.06 }).then(() => {
|
||||
if (openMv.get() === 0) setVeiled(false);
|
||||
});
|
||||
drops.forEach(d => animate(d, 0, { type: 'spring', duration: 0.3, bounce: 0, delay: 0.1 }));
|
||||
}, [status]);
|
||||
|
||||
useEffect(() => {
|
||||
if (status !== 'error') return;
|
||||
const filled = slotsRef.current.map((c, i) => (c ? i : -1)).filter(i => i >= 0);
|
||||
if (!filled.length) return;
|
||||
filled.reverse();
|
||||
draining.current = true;
|
||||
const L = live.current;
|
||||
const step = L.reduce ? 0 : L.cascade;
|
||||
filled.forEach((i, k) => drive(i, 0, k * step));
|
||||
moveActive(
|
||||
0,
|
||||
slotsRef.current.map((_, j) => j)
|
||||
);
|
||||
clearTimeout(drainTimer.current);
|
||||
drainTimer.current = setTimeout(
|
||||
() => {
|
||||
draining.current = false;
|
||||
commit(Array.from({ length }, () => ''));
|
||||
},
|
||||
L.reduce ? 300 : (filled.length - 1) * step + L.settle * 1000
|
||||
);
|
||||
}, [status]);
|
||||
useEffect(() => {
|
||||
statusRef.current = status;
|
||||
}, [status]);
|
||||
useEffect(() => () => clearTimeout(drainTimer.current), []);
|
||||
useEffect(() => {
|
||||
if (autoFocus) inputRef.current?.focus();
|
||||
}, [autoFocus]);
|
||||
|
||||
const view = slots.length === length ? slots : Array.from({ length }, (_, i) => slots[i] ?? '');
|
||||
const showCaret =
|
||||
caret && focused && !disabled && !veiled && status !== 'success' && (status === 'error' || !view[active]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`relative inline-block${className ? ` ${className}` : ''}`}
|
||||
style={
|
||||
{
|
||||
'--cs-accent': accentColor,
|
||||
'--cs-ink': inkColor,
|
||||
'--cs-slot': slotColor,
|
||||
'--cs-digit': digitColor,
|
||||
'--cs-danger': dangerColor,
|
||||
'--cs-size': `${slotSize}px`,
|
||||
'--cs-height': `${height}px`,
|
||||
'--cs-gap': `${gap}px`,
|
||||
'--cs-radius': `${Math.min(radius, slotSize / 2)}px`,
|
||||
'--cs-font': `${Math.round(slotSize * 0.5)}px`
|
||||
} as CSSProperties
|
||||
}
|
||||
>
|
||||
<style>{STYLE}</style>
|
||||
<div
|
||||
ref={rowRef}
|
||||
className="group/row relative inline-flex cursor-text touch-manipulation gap-[var(--cs-gap)] [-webkit-tap-highlight-color:transparent] [transition:opacity_200ms_ease] data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"
|
||||
data-status={status}
|
||||
data-focused={focused ? '' : undefined}
|
||||
data-disabled={disabled ? '' : undefined}
|
||||
onMouseDown={onRowMouseDown}
|
||||
>
|
||||
<input
|
||||
ref={inputRef}
|
||||
className="absolute inset-0 z-[4] m-0 cursor-[inherit] appearance-none border-0 bg-transparent p-0 text-[16px] text-transparent opacity-0 outline-0 [caret-color:transparent]"
|
||||
type="text"
|
||||
inputMode="numeric"
|
||||
autoComplete="one-time-code"
|
||||
pattern="[0-9]*"
|
||||
value=""
|
||||
maxLength={length}
|
||||
aria-label={ariaLabel}
|
||||
aria-invalid={status === 'error'}
|
||||
aria-describedby={`${uid}-count`}
|
||||
disabled={disabled}
|
||||
readOnly={status === 'success'}
|
||||
onKeyDown={onKeyDown}
|
||||
onPaste={onPaste}
|
||||
onChange={onInput}
|
||||
onFocus={() => setFocused(true)}
|
||||
onBlur={() => setFocused(false)}
|
||||
/>
|
||||
{view.map((ch, i) => (
|
||||
<Slot
|
||||
key={i}
|
||||
mv={mvs[i]}
|
||||
drop={drops[i]}
|
||||
char={mask && ch ? '•' : ch}
|
||||
active={focused && i === active}
|
||||
rise={rise}
|
||||
sink={Math.round(height * 0.5)}
|
||||
/>
|
||||
))}
|
||||
<motion.span
|
||||
className="pointer-events-none absolute inset-0 z-[1] grid place-items-center rounded-[var(--cs-radius)] bg-[var(--cs-accent)] [color:var(--cs-digit)] motion-reduce:opacity-0 motion-reduce:[transition:opacity_200ms_ease] motion-reduce:in-data-[status=success]:opacity-100"
|
||||
aria-hidden="true"
|
||||
style={{ clipPath: washClip }}
|
||||
>
|
||||
<motion.span
|
||||
className="grid place-items-center motion-reduce:transform-none! motion-reduce:[transition:opacity_150ms_ease]"
|
||||
style={{ transform: checkTransform, opacity: checkOpacity }}
|
||||
>
|
||||
<HugeiconsIcon icon={Tick02Icon} size={Math.round(slotSize * 0.6)} strokeWidth={2.2} />
|
||||
</motion.span>
|
||||
</motion.span>
|
||||
<motion.span
|
||||
className="pointer-events-none absolute top-1/4 left-[calc(var(--cs-size)/2_-_0.75px)] z-[3] h-1/2 w-[1.5px] opacity-0 data-[show]:opacity-100"
|
||||
aria-hidden="true"
|
||||
data-show={showCaret ? '' : undefined}
|
||||
style={{ transform: caretTransform }}
|
||||
>
|
||||
<span
|
||||
key={active}
|
||||
className="block h-full w-full bg-[var(--cs-ink)] animate-[code-slots-blink_1s_linear_infinite] motion-reduce:animate-none"
|
||||
/>
|
||||
</motion.span>
|
||||
</div>
|
||||
<span id={`${uid}-count`} className="sr-only" aria-live="polite">
|
||||
{status === 'success' ? 'Code accepted' : `${view.filter(Boolean).length} of ${length} digits entered`}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
function Slot({ mv, drop, char, active, rise, sink }: SlotProps) {
|
||||
const [shown, setShown] = useState(char);
|
||||
if (char && char !== shown) setShown(char);
|
||||
const fill = useTransform(mv, (t: number) => `scale(${Math.max(t, 0)})`);
|
||||
const lift = useTransform(
|
||||
[mv, drop],
|
||||
([t, d]: number[]) => `translateY(${(1 - t) * rise + Math.max(d, 0) * sink}px)`
|
||||
);
|
||||
const ink = useTransform([mv, drop], ([t, d]: number[]) => clamp01(t) * (1 - clamp01(d / SINK_FADE)));
|
||||
return (
|
||||
<span
|
||||
className="relative h-[var(--cs-height)] w-[var(--cs-size)] overflow-hidden rounded-[var(--cs-radius)] bg-[var(--cs-slot)] select-none [transition:background-color_200ms_ease] data-[active]:[background-color:color-mix(in_srgb,var(--cs-ink)_8%,var(--cs-slot))] in-data-[status=error]:[background-color:color-mix(in_srgb,var(--cs-danger)_20%,var(--cs-slot))] in-data-[status=error]:data-[active]:[background-color:color-mix(in_srgb,var(--cs-danger)_20%,var(--cs-slot))] [@media(hover:hover)_and_(pointer:fine)]:group-hover/row:in-data-[status=idle]:not-in-data-[disabled]:not-data-[active]:[background-color:color-mix(in_srgb,var(--cs-ink)_4%,var(--cs-slot))]"
|
||||
data-active={active ? '' : undefined}
|
||||
data-filled={char ? '' : undefined}
|
||||
aria-hidden="true"
|
||||
>
|
||||
<motion.span
|
||||
className="absolute inset-0 origin-center rounded-[inherit] bg-[var(--cs-accent)] [transition:background-color_200ms_ease] in-data-[status=error]:bg-[var(--cs-danger)]"
|
||||
style={{ transform: fill }}
|
||||
/>
|
||||
{shown ? (
|
||||
<motion.span
|
||||
className="absolute inset-0 z-[2] grid place-items-center text-[length:var(--cs-font)] leading-none font-semibold tabular-nums [font-family:inherit] [color:var(--cs-digit)] motion-reduce:transform-none! motion-reduce:[transition:opacity_150ms_ease]"
|
||||
style={{ transform: lift, opacity: ink }}
|
||||
>
|
||||
{shown}
|
||||
</motion.span>
|
||||
) : null}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export default CodeSlots;
|
||||
@@ -0,0 +1,446 @@
|
||||
'use client';
|
||||
|
||||
import React, { useCallback, useEffect, useLayoutEffect, useRef, useState, type CSSProperties } from 'react';
|
||||
import { animate, useMotionValue, useReducedMotion } from 'motion/react';
|
||||
|
||||
const R = 80;
|
||||
const DEAD = 44;
|
||||
const K = 12;
|
||||
const V_FULL = 4;
|
||||
const V_FLICK = 2;
|
||||
const TAU_FOLLOW = 0.06;
|
||||
const TAU_V = 0.05;
|
||||
const DECEL = 0.99;
|
||||
const DRAG_PX = 10;
|
||||
const STALE_MS = 80;
|
||||
|
||||
export interface CometDialChangeDetail {
|
||||
velocity: number;
|
||||
bounce: number;
|
||||
}
|
||||
|
||||
export interface CometDialProps {
|
||||
value?: number;
|
||||
defaultValue?: number;
|
||||
min?: number;
|
||||
max?: number;
|
||||
step?: number;
|
||||
unit?: string;
|
||||
label?: string;
|
||||
accent?: string;
|
||||
ink?: string;
|
||||
size?: number;
|
||||
sweep?: number;
|
||||
thickness?: number;
|
||||
speed?: number;
|
||||
tapBounce?: number;
|
||||
flickBounce?: number;
|
||||
momentum?: number;
|
||||
cometReach?: number;
|
||||
cometWidth?: number;
|
||||
disabled?: boolean;
|
||||
onChange?: (value: number) => void;
|
||||
onChangeEnd?: (value: number, detail: CometDialChangeDetail) => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
type Sample = [number, number];
|
||||
|
||||
interface Grip {
|
||||
id: number;
|
||||
at: number | null;
|
||||
hist: Sample[];
|
||||
side: 'hi' | 'lo' | null;
|
||||
moved: boolean;
|
||||
x0: number;
|
||||
y0: number;
|
||||
}
|
||||
|
||||
interface Loop {
|
||||
raf: number;
|
||||
last: number;
|
||||
v: number;
|
||||
rPrev: number | null;
|
||||
text: string;
|
||||
valueText: string;
|
||||
}
|
||||
|
||||
interface Live {
|
||||
move: (e: PointerEvent) => void;
|
||||
up: (e: PointerEvent) => void;
|
||||
}
|
||||
|
||||
const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v));
|
||||
const velocityOf = (hist: Sample[]) => {
|
||||
if (hist.length < 2) return 0;
|
||||
const a = hist[0];
|
||||
const b = hist[hist.length - 1];
|
||||
return ((b[1] - a[1]) / Math.max(1, b[0] - a[0])) * 1000;
|
||||
};
|
||||
const decimalsOf = (step: number) => {
|
||||
const s = String(step);
|
||||
const i = s.indexOf('.');
|
||||
return i === -1 ? 0 : s.length - i - 1;
|
||||
};
|
||||
const pointAt = (deg: number): [number, number] => {
|
||||
const a = (deg * Math.PI) / 180;
|
||||
return [100 + Math.cos(a) * R, 100 + Math.sin(a) * R];
|
||||
};
|
||||
const arcPath = (a0: number, a1: number) => {
|
||||
const [x0, y0] = pointAt(a0);
|
||||
const [x1, y1] = pointAt(a1);
|
||||
return `M ${x0.toFixed(3)} ${y0.toFixed(3)} A ${R} ${R} 0 ${a1 - a0 > 180 ? 1 : 0} 1 ${x1.toFixed(3)} ${y1.toFixed(3)}`;
|
||||
};
|
||||
|
||||
const CometDial: React.FC<CometDialProps> = ({
|
||||
value,
|
||||
defaultValue = 62,
|
||||
min = 0,
|
||||
max = 100,
|
||||
step = 1,
|
||||
unit = '%',
|
||||
label = 'Level',
|
||||
accent = '#f5f5f5',
|
||||
ink = '#fdfdfd',
|
||||
size = 250,
|
||||
sweep = 320,
|
||||
thickness = 5,
|
||||
speed = 25,
|
||||
tapBounce = 0.2,
|
||||
flickBounce = 0.1,
|
||||
momentum = 1,
|
||||
cometReach = 180,
|
||||
cometWidth = 12,
|
||||
disabled = false,
|
||||
onChange,
|
||||
onChangeEnd,
|
||||
className = ''
|
||||
}) => {
|
||||
const reduce = useReducedMotion();
|
||||
const [dragging, setDragging] = useState(false);
|
||||
const svgRef = useRef<SVGSVGElement>(null);
|
||||
const litRef = useRef<SVGPathElement>(null);
|
||||
const headRef = useRef<SVGCircleElement>(null);
|
||||
const comet = useRef<(SVGPathElement | null)[]>([]);
|
||||
const figure = useRef<HTMLSpanElement>(null);
|
||||
const target = useRef(clamp(value ?? defaultValue, min, max));
|
||||
const grip = useRef<Grip | null>(null);
|
||||
const unbind = useRef<(() => void) | null>(null);
|
||||
const loop = useRef<Loop>({ raf: 0, last: 0, v: 0, rPrev: null, text: '', valueText: '' });
|
||||
const live = useRef<Live>({} as Live);
|
||||
const reading = useMotionValue(target.current);
|
||||
|
||||
const range = Math.max(1e-9, max - min);
|
||||
const gap = 360 - sweep;
|
||||
const start = 90 + gap / 2;
|
||||
const end = start + sweep;
|
||||
const decimals = decimalsOf(step);
|
||||
const k = 200 + (clamp(speed, 0, 100) / 100) * 700;
|
||||
const crit = 2 * Math.sqrt(k);
|
||||
const snap = (v: number) =>
|
||||
step > 0 ? clamp(Math.round((v - min) / step) * step + min, min, max) : clamp(v, min, max);
|
||||
|
||||
const commit = (v: number, finished: boolean, detail?: CometDialChangeDetail) => {
|
||||
const s = snap(v);
|
||||
if (s !== target.current) {
|
||||
target.current = s;
|
||||
onChange?.(s);
|
||||
}
|
||||
if (finished) onChangeEnd?.(s, detail ?? { velocity: 0, bounce: tapBounce });
|
||||
};
|
||||
|
||||
const paintRef = useRef<((now: number) => void) | null>(null);
|
||||
const tick = useCallback((now: number) => paintRef.current?.(now), []);
|
||||
const wake = () => {
|
||||
const L = loop.current;
|
||||
if (L.raf) return;
|
||||
L.last = performance.now();
|
||||
L.rPrev = null;
|
||||
L.raf = requestAnimationFrame(tick);
|
||||
};
|
||||
const launch = (to: number, bounce: number, velocity = reading.getVelocity()) => {
|
||||
reading.stop();
|
||||
if (reduce) {
|
||||
reading.jump(to);
|
||||
wake();
|
||||
return;
|
||||
}
|
||||
animate(reading, to, {
|
||||
type: 'spring',
|
||||
stiffness: k,
|
||||
damping: crit * (1 - clamp(bounce, 0, 0.9)),
|
||||
mass: 1,
|
||||
velocity
|
||||
});
|
||||
wake();
|
||||
};
|
||||
|
||||
const paint = (now: number) => {
|
||||
const L = loop.current;
|
||||
const svg = svgRef.current;
|
||||
if (!svg) {
|
||||
L.raf = 0;
|
||||
return;
|
||||
}
|
||||
const dt = clamp((now - L.last) / 1000, 0, 0.05);
|
||||
L.last = now;
|
||||
const g = grip.current;
|
||||
if (g && g.at != null) {
|
||||
if (reduce) reading.jump(g.at);
|
||||
else reading.set(reading.get() + (g.at - reading.get()) * (1 - Math.exp(-dt / TAU_FOLLOW)));
|
||||
}
|
||||
const r = reading.get();
|
||||
const vRaw = L.rPrev == null || dt === 0 || reduce ? 0 : (r - L.rPrev) / dt / range;
|
||||
L.rPrev = r;
|
||||
L.v += (vRaw - L.v) * (1 - Math.exp(-dt / TAU_V));
|
||||
const v = L.v;
|
||||
const s = clamp(Math.abs(v) / V_FULL, 0, 1);
|
||||
const dir = Math.sign(v) || 1;
|
||||
const f = clamp((r - min) / range, 0, 1);
|
||||
const ang = start + f * sweep;
|
||||
if (litRef.current) litRef.current.setAttribute('d', f > 0.0005 ? arcPath(start, ang) : '');
|
||||
if (headRef.current) {
|
||||
const [cx, cy] = pointAt(ang);
|
||||
headRef.current.setAttribute('cx', cx.toFixed(3));
|
||||
headRef.current.setAttribute('cy', cy.toFixed(3));
|
||||
}
|
||||
const seg = (cometReach * s) / K;
|
||||
for (let j = 0; j < K; j++) {
|
||||
const el = comet.current[j];
|
||||
if (!el) continue;
|
||||
let a0 = dir > 0 ? ang - (j + 1) * seg : ang + j * seg;
|
||||
let a1 = dir > 0 ? ang - j * seg : ang + (j + 1) * seg;
|
||||
a0 = clamp(a0, start, end);
|
||||
a1 = clamp(a1, start, end);
|
||||
if (seg < 0.01 || a1 - a0 < 0.01) {
|
||||
if (el.style.opacity !== '0') el.style.opacity = '0';
|
||||
continue;
|
||||
}
|
||||
const w = 1 - j / K;
|
||||
el.setAttribute('d', arcPath(a0, a1));
|
||||
el.setAttribute('stroke-width', (thickness + cometWidth * w * s).toFixed(2));
|
||||
el.style.opacity = (w * s).toFixed(3);
|
||||
}
|
||||
const shown = clamp(r, min, max).toFixed(decimals);
|
||||
if (shown !== L.text) {
|
||||
L.text = shown;
|
||||
if (figure.current) figure.current.textContent = shown;
|
||||
svg.setAttribute('aria-valuenow', shown);
|
||||
}
|
||||
const valueText = `${target.current}${unit}`;
|
||||
if (valueText !== L.valueText) {
|
||||
L.valueText = valueText;
|
||||
svg.setAttribute('aria-valuetext', valueText);
|
||||
}
|
||||
const moving = !!g || reading.isAnimating() || Math.abs(v) > 0.002;
|
||||
if (!moving) {
|
||||
for (const el of comet.current) if (el && el.style.opacity !== '0') el.style.opacity = '0';
|
||||
}
|
||||
L.raf = moving ? requestAnimationFrame(tick) : 0;
|
||||
};
|
||||
paintRef.current = paint;
|
||||
|
||||
const localPoint = (cx: number, cy: number): [number, number] => {
|
||||
const b = (svgRef.current as SVGSVGElement).getBoundingClientRect();
|
||||
return [((cx - b.left) / b.width) * 200 - 100, ((cy - b.top) / b.height) * 200 - 100];
|
||||
};
|
||||
const angleAt = (cx: number, cy: number) => {
|
||||
const [x, y] = localPoint(cx, cy);
|
||||
let rel = ((Math.atan2(y, x) * 180) / Math.PI - start + 720) % 360;
|
||||
const g = grip.current;
|
||||
if (rel > sweep) rel = g && g.side ? (g.side === 'hi' ? sweep : 0) : rel < sweep + gap / 2 ? sweep : 0;
|
||||
else if (g) g.side = rel > sweep / 2 ? 'hi' : 'lo';
|
||||
return min + (rel / sweep) * range;
|
||||
};
|
||||
|
||||
const move = (e: PointerEvent) => {
|
||||
const g = grip.current;
|
||||
if (!g || g.id !== e.pointerId) return;
|
||||
if (!g.moved) {
|
||||
if (Math.hypot(e.clientX - g.x0, e.clientY - g.y0) < DRAG_PX) return;
|
||||
g.moved = true;
|
||||
reading.stop();
|
||||
}
|
||||
g.at = angleAt(e.clientX, e.clientY);
|
||||
g.hist.push([performance.now(), g.at]);
|
||||
if (g.hist.length > 4) g.hist.shift();
|
||||
commit(g.at, false);
|
||||
wake();
|
||||
};
|
||||
const up = (e: PointerEvent) => {
|
||||
const g = grip.current;
|
||||
if (!g || g.id !== e.pointerId) return;
|
||||
grip.current = null;
|
||||
unbind.current?.();
|
||||
unbind.current = null;
|
||||
setDragging(false);
|
||||
try {
|
||||
svgRef.current?.releasePointerCapture(e.pointerId);
|
||||
} catch {}
|
||||
if (!g.moved) {
|
||||
commit(target.current, true);
|
||||
return;
|
||||
}
|
||||
const stale = performance.now() - g.hist[g.hist.length - 1][0] > STALE_MS;
|
||||
const v = e.type === 'pointercancel' || stale ? 0 : velocityOf(g.hist);
|
||||
const bounce = tapBounce + (flickBounce - tapBounce) * clamp(Math.abs(v) / range / V_FLICK, 0, 1);
|
||||
const to = snap((g.at ?? target.current) + (v / 1000) * (DECEL / (1 - DECEL)) * momentum);
|
||||
commit(to, true, { velocity: v, bounce });
|
||||
launch(to, bounce, v);
|
||||
};
|
||||
live.current = { move, up };
|
||||
|
||||
const down = (e: React.PointerEvent<SVGSVGElement>) => {
|
||||
if (disabled || grip.current || e.button > 0) return;
|
||||
const [x, y] = localPoint(e.clientX, e.clientY);
|
||||
if (Math.hypot(x, y) < DEAD) return;
|
||||
e.preventDefault();
|
||||
const svg = svgRef.current as SVGSVGElement;
|
||||
try {
|
||||
svg.setPointerCapture(e.pointerId);
|
||||
} catch {}
|
||||
svg.focus({ preventScroll: true });
|
||||
grip.current = { id: e.pointerId, at: null, hist: [], side: null, moved: false, x0: e.clientX, y0: e.clientY };
|
||||
const at = angleAt(e.clientX, e.clientY);
|
||||
grip.current.hist.push([performance.now(), at]);
|
||||
setDragging(true);
|
||||
commit(at, false);
|
||||
launch(snap(at), tapBounce);
|
||||
const onMove = (ev: PointerEvent) => {
|
||||
if (ev.isTrusted) live.current.move(ev);
|
||||
};
|
||||
const onUp = (ev: PointerEvent) => {
|
||||
if (ev.isTrusted) live.current.up(ev);
|
||||
};
|
||||
window.addEventListener('pointermove', onMove);
|
||||
window.addEventListener('pointerup', onUp);
|
||||
window.addEventListener('pointercancel', onUp);
|
||||
unbind.current = () => {
|
||||
window.removeEventListener('pointermove', onMove);
|
||||
window.removeEventListener('pointerup', onUp);
|
||||
window.removeEventListener('pointercancel', onUp);
|
||||
};
|
||||
};
|
||||
|
||||
const key = (e: React.KeyboardEvent<SVGSVGElement>) => {
|
||||
if (disabled) return;
|
||||
const t = target.current;
|
||||
const big = e.shiftKey ? 10 : 1;
|
||||
let to: number;
|
||||
switch (e.key) {
|
||||
case 'ArrowRight':
|
||||
case 'ArrowUp':
|
||||
to = t + step * big;
|
||||
break;
|
||||
case 'ArrowLeft':
|
||||
case 'ArrowDown':
|
||||
to = t - step * big;
|
||||
break;
|
||||
case 'PageUp':
|
||||
to = t + step * 10;
|
||||
break;
|
||||
case 'PageDown':
|
||||
to = t - step * 10;
|
||||
break;
|
||||
case 'Home':
|
||||
to = min;
|
||||
break;
|
||||
case 'End':
|
||||
to = max;
|
||||
break;
|
||||
default:
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
to = snap(to);
|
||||
reading.stop();
|
||||
reading.jump(to);
|
||||
commit(to, true);
|
||||
wake();
|
||||
};
|
||||
|
||||
useLayoutEffect(() => {
|
||||
const L = loop.current;
|
||||
L.text = '';
|
||||
L.valueText = '';
|
||||
paintRef.current?.(performance.now());
|
||||
}, [min, max, step, sweep, thickness, cometReach, cometWidth, unit]);
|
||||
useEffect(() => {
|
||||
if (value === undefined || grip.current) return;
|
||||
const s = snap(value);
|
||||
if (s === target.current) return;
|
||||
target.current = s;
|
||||
launch(s, tapBounce);
|
||||
}, [value]);
|
||||
useEffect(
|
||||
() => () => {
|
||||
cancelAnimationFrame(loop.current.raf);
|
||||
unbind.current?.();
|
||||
reading.stop();
|
||||
},
|
||||
[reading]
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`group relative select-none [-webkit-touch-callout:none] [-webkit-tap-highlight-color:transparent] [width:var(--cd-size)] [height:var(--cd-size)] [color:var(--cd-ink)] data-[disabled]:opacity-55${className ? ` ${className}` : ''}`}
|
||||
data-dragging={dragging ? '' : undefined}
|
||||
data-disabled={disabled ? '' : undefined}
|
||||
style={
|
||||
{
|
||||
'--cd-accent': accent,
|
||||
'--cd-ink': ink,
|
||||
'--cd-size': `${size}px`,
|
||||
'--cd-figure': `${Math.round(size * 0.16)}px`
|
||||
} as CSSProperties
|
||||
}
|
||||
>
|
||||
<svg
|
||||
ref={svgRef}
|
||||
className="absolute inset-0 block h-full w-full cursor-grab touch-none rounded-full outline-none group-data-[dragging]:cursor-grabbing group-data-[disabled]:pointer-events-none group-data-[disabled]:cursor-default"
|
||||
viewBox="0 0 200 200"
|
||||
role="slider"
|
||||
tabIndex={disabled ? -1 : 0}
|
||||
aria-label={label}
|
||||
aria-valuemin={min}
|
||||
aria-valuemax={max}
|
||||
aria-valuenow={target.current}
|
||||
aria-valuetext={`${target.current}${unit}`}
|
||||
aria-disabled={disabled || undefined}
|
||||
onPointerDown={down}
|
||||
onKeyDown={key}
|
||||
>
|
||||
<path
|
||||
className="fill-none opacity-[0.24] [stroke:var(--cd-ink)] [stroke-linecap:round]"
|
||||
d={arcPath(start, end)}
|
||||
strokeWidth={thickness}
|
||||
/>
|
||||
<path
|
||||
ref={litRef}
|
||||
className="fill-none opacity-70 [stroke:var(--cd-accent)] [stroke-linecap:round]"
|
||||
strokeWidth={thickness}
|
||||
/>
|
||||
<g className="[&_path]:fill-none [&_path]:[stroke:var(--cd-accent)] [&_path]:[stroke-linecap:round]">
|
||||
{Array.from({ length: K }, (_, j) => (
|
||||
<path
|
||||
key={j}
|
||||
ref={el => {
|
||||
comet.current[j] = el;
|
||||
}}
|
||||
style={{ opacity: 0 }}
|
||||
/>
|
||||
))}
|
||||
</g>
|
||||
<circle ref={headRef} className="[fill:var(--cd-accent)]" r={thickness * 1.8} />
|
||||
</svg>
|
||||
<div className="pointer-events-none absolute inset-0 grid place-items-center" aria-hidden="true">
|
||||
<span className="inline-flex items-baseline gap-[0.06em] leading-none font-medium tracking-[-0.04em] tabular-nums [font-size:var(--cd-figure)]">
|
||||
<span ref={figure} className="comet-dial__figure" />
|
||||
{unit ? <span className="text-[0.5em] opacity-50">{unit}</span> : null}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CometDial;
|
||||
@@ -0,0 +1,358 @@
|
||||
'use client';
|
||||
|
||||
import React, { useEffect, useId, useLayoutEffect, useRef, useState, type CSSProperties, type ReactNode } from 'react';
|
||||
|
||||
export type HoldButtonSize = 'sm' | 'md' | 'lg';
|
||||
export type HoldButtonDirection = 'right' | 'up';
|
||||
|
||||
export interface HoldButtonProps {
|
||||
children?: ReactNode;
|
||||
doneLabel?: ReactNode;
|
||||
icon?: ReactNode;
|
||||
doneIcon?: ReactNode;
|
||||
backgroundColor?: string;
|
||||
fillColor?: string;
|
||||
textColor?: string;
|
||||
fillTextColor?: string;
|
||||
size?: HoldButtonSize;
|
||||
radius?: number;
|
||||
fillDirection?: HoldButtonDirection;
|
||||
holdTime?: number;
|
||||
releaseTime?: number;
|
||||
pressScale?: number;
|
||||
wave?: boolean;
|
||||
waveAmplitude?: number;
|
||||
glow?: boolean;
|
||||
resetAfter?: number;
|
||||
disabled?: boolean;
|
||||
onHold?: () => void;
|
||||
onTap?: () => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
type Phase = 'idle' | 'holding' | 'done';
|
||||
type Input = 'pointer' | 'key' | null;
|
||||
|
||||
interface Motion {
|
||||
raf: number;
|
||||
p: number;
|
||||
from: number;
|
||||
to: number;
|
||||
start: number;
|
||||
}
|
||||
|
||||
interface Gesture {
|
||||
pointerId: number | null;
|
||||
start: number;
|
||||
rect: DOMRect | null;
|
||||
}
|
||||
|
||||
interface ReleaseOptions {
|
||||
drifted?: boolean;
|
||||
}
|
||||
|
||||
const TAP_MS = 250;
|
||||
const HIT_PAD = 10;
|
||||
const LINEAR = (t: number) => t;
|
||||
const EASE_OUT = (t: number) => 1 - Math.pow(1 - t, 3);
|
||||
|
||||
const SIZES: Record<HoldButtonSize, string> = {
|
||||
sm: 'h-9 px-4 text-[13px]',
|
||||
md: 'h-11 px-[22px] text-[15px]',
|
||||
lg: 'h-[52px] px-7 text-[17px]'
|
||||
};
|
||||
|
||||
const GLOW = 'inset_0_1px_0_rgba(255,255,255,0.06),0_10px_32px_-6px_color-mix(in_srgb,var(--hb-fill)_70%,transparent)';
|
||||
|
||||
const LABEL_SPAN =
|
||||
'[grid-area:1/1] inline-flex items-center gap-2 whitespace-nowrap [transition:opacity_200ms_ease,filter_200ms_ease]';
|
||||
|
||||
const STYLE = `
|
||||
.hb-root{--hb-w:0px;--hb-h:0px;--hb-cycles:2;--hb-p:0}
|
||||
.hb-fill{clip-path:inset(0 calc((1 - var(--hb-p)) * (100% + 0.75 * var(--hb-wave)) - var(--hb-p) * 0.25 * var(--hb-wave)) 0 0)}
|
||||
.hb-root[data-direction=up] .hb-fill{clip-path:inset(calc((1 - var(--hb-p)) * (100% + 0.75 * var(--hb-wave)) - var(--hb-p) * 0.25 * var(--hb-wave)) 0 0 0)}
|
||||
.hb-crest{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='200' viewBox='0 0 20 200' preserveAspectRatio='none'%3E%3Cpath d='M0 0H10C18 8 18 25.3 10 33.3S2 58.7 10 66.7S18 92 10 100S2 125.3 10 133.3S18 158.7 10 166.7S2 192 10 200H0Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='200' viewBox='0 0 20 200' preserveAspectRatio='none'%3E%3Cpath d='M0 0H10C18 8 18 25.3 10 33.3S2 58.7 10 66.7S18 92 10 100S2 125.3 10 133.3S18 158.7 10 166.7S2 192 10 200H0Z'/%3E%3C/svg%3E");-webkit-mask-repeat:repeat-y;mask-repeat:repeat-y;-webkit-mask-size:var(--hb-wave) calc(var(--hb-h) * 2);mask-size:var(--hb-wave) calc(var(--hb-h) * 2);-webkit-mask-position-x:calc(-1 * var(--hb-wave) + var(--hb-p) * (var(--hb-w) + var(--hb-wave)));mask-position-x:calc(-1 * var(--hb-wave) + var(--hb-p) * (var(--hb-w) + var(--hb-wave)));-webkit-mask-position-y:calc(-1 * var(--hb-p) * var(--hb-cycles) * var(--hb-h));mask-position-y:calc(-1 * var(--hb-p) * var(--hb-cycles) * var(--hb-h))}
|
||||
.hb-root[data-direction=up] .hb-crest{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='20' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M0 20V10C12 2 38 2 50 10S88 18 100 10S138 2 150 10S188 18 200 10V20Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='20' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M0 20V10C12 2 38 2 50 10S88 18 100 10S138 2 150 10S188 18 200 10V20Z'/%3E%3C/svg%3E");-webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;-webkit-mask-size:calc(var(--hb-w) * 2) var(--hb-wave);mask-size:calc(var(--hb-w) * 2) var(--hb-wave);-webkit-mask-position-x:calc(-1 * var(--hb-p) * var(--hb-cycles) * var(--hb-w));mask-position-x:calc(-1 * var(--hb-p) * var(--hb-cycles) * var(--hb-w));-webkit-mask-position-y:calc(var(--hb-h) - var(--hb-p) * (var(--hb-h) + var(--hb-wave)));mask-position-y:calc(var(--hb-h) - var(--hb-p) * (var(--hb-h) + var(--hb-wave)))}
|
||||
@keyframes hb-pulse{from{opacity:1;box-shadow:0 0 0 0 color-mix(in srgb,var(--hb-fill) 55%,transparent)}to{opacity:0;box-shadow:0 0 0 14px color-mix(in srgb,var(--hb-fill) 0%,transparent)}}
|
||||
@media (prefers-reduced-motion:reduce){
|
||||
.hb-root{transform:none!important;transition:background-color 160ms ease,box-shadow var(--hb-release) ease!important}
|
||||
.hb-fill{clip-path:inset(0)!important;opacity:0;transition:opacity var(--hb-release) ease!important}
|
||||
.hb-crest{display:none}
|
||||
.hb-root[data-phase=holding] .hb-fill,.hb-root[data-phase=done] .hb-fill{opacity:1;transition:opacity var(--hb-hold) linear!important}
|
||||
.hb-pulse{animation:none!important}
|
||||
.hb-label>span{filter:none!important;transition:opacity 200ms ease!important}
|
||||
}`;
|
||||
|
||||
const HoldButton: React.FC<HoldButtonProps> = ({
|
||||
children = 'Hold to delete',
|
||||
doneLabel = 'Deleted',
|
||||
icon = null,
|
||||
doneIcon = null,
|
||||
backgroundColor = '#27272a',
|
||||
fillColor = '#5227FF',
|
||||
textColor = '#f5f5f5',
|
||||
fillTextColor = '#ffffff',
|
||||
size = 'md',
|
||||
radius = 14,
|
||||
fillDirection = 'right',
|
||||
holdTime = 2000,
|
||||
releaseTime = 200,
|
||||
pressScale = 0.97,
|
||||
wave = true,
|
||||
waveAmplitude = 6,
|
||||
glow = true,
|
||||
resetAfter = 1200,
|
||||
disabled = false,
|
||||
onHold,
|
||||
onTap,
|
||||
className = ''
|
||||
}) => {
|
||||
const [phase, setPhase] = useState<Phase>('idle');
|
||||
const [input, setInput] = useState<Input>(null);
|
||||
const phaseRef = useRef<Phase>('idle');
|
||||
const inputRef = useRef<Input>(null);
|
||||
const buttonRef = useRef<HTMLButtonElement>(null);
|
||||
const gesture = useRef<Gesture>({ pointerId: null, start: 0, rect: null });
|
||||
const timers = useRef({ complete: 0, reset: 0 });
|
||||
const hintId = useId();
|
||||
|
||||
const go = (next: Phase, kind: Input = null) => {
|
||||
phaseRef.current = next;
|
||||
inputRef.current = kind;
|
||||
setPhase(next);
|
||||
setInput(kind);
|
||||
};
|
||||
|
||||
const clearTimers = () => {
|
||||
clearTimeout(timers.current.complete);
|
||||
clearTimeout(timers.current.reset);
|
||||
};
|
||||
|
||||
const motion = useRef<Motion>({ raf: 0, p: 0, from: 0, to: 0, start: 0 });
|
||||
const drive = (to: number, duration: number, ease: (t: number) => number) => {
|
||||
const m = motion.current;
|
||||
cancelAnimationFrame(m.raf);
|
||||
m.from = m.p;
|
||||
m.to = to;
|
||||
m.start = performance.now();
|
||||
const step = (now: number) => {
|
||||
const t = duration > 0 ? Math.min(1, (now - m.start) / duration) : 1;
|
||||
m.p = m.from + (m.to - m.from) * ease(t);
|
||||
buttonRef.current?.style.setProperty('--hb-p', m.p.toFixed(4));
|
||||
if (t < 1) {
|
||||
m.raf = requestAnimationFrame(step);
|
||||
return;
|
||||
}
|
||||
m.raf = 0;
|
||||
if (m.to === 1) complete();
|
||||
};
|
||||
m.raf = requestAnimationFrame(step);
|
||||
};
|
||||
|
||||
const complete = () => {
|
||||
if (phaseRef.current !== 'holding') return;
|
||||
if (performance.now() - gesture.current.start < holdTime - 50) return;
|
||||
clearTimers();
|
||||
go('done', inputRef.current);
|
||||
onHold?.();
|
||||
if (resetAfter > 0) {
|
||||
timers.current.reset = window.setTimeout(() => {
|
||||
go('idle');
|
||||
drive(0, releaseTime, EASE_OUT);
|
||||
}, resetAfter);
|
||||
}
|
||||
};
|
||||
|
||||
const begin = (kind: Input) => {
|
||||
if (disabled || phaseRef.current !== 'idle') return false;
|
||||
const button = buttonRef.current;
|
||||
if (!button) return false;
|
||||
gesture.current.start = performance.now();
|
||||
gesture.current.rect = button.getBoundingClientRect();
|
||||
go('holding', kind);
|
||||
drive(1, holdTime, LINEAR);
|
||||
timers.current.complete = window.setTimeout(complete, holdTime + 100);
|
||||
return true;
|
||||
};
|
||||
|
||||
const release = ({ drifted = false }: ReleaseOptions = {}) => {
|
||||
if (phaseRef.current !== 'holding') return;
|
||||
clearTimers();
|
||||
const held = performance.now() - gesture.current.start;
|
||||
go('idle');
|
||||
drive(0, releaseTime, EASE_OUT);
|
||||
if (!drifted && held < TAP_MS) onTap?.();
|
||||
};
|
||||
const releaseRef = useRef(release);
|
||||
releaseRef.current = release;
|
||||
|
||||
const handlePointerDown = (e: React.PointerEvent<HTMLButtonElement>) => {
|
||||
if (e.button !== 0 || !e.isPrimary || gesture.current.pointerId !== null) return;
|
||||
if (!begin('pointer')) return;
|
||||
gesture.current.pointerId = e.pointerId;
|
||||
try {
|
||||
e.currentTarget.setPointerCapture(e.pointerId);
|
||||
} catch {}
|
||||
};
|
||||
|
||||
const endPointer = (e: React.PointerEvent<HTMLButtonElement>, options?: ReleaseOptions) => {
|
||||
if (e.pointerId !== gesture.current.pointerId) return;
|
||||
gesture.current.pointerId = null;
|
||||
try {
|
||||
if (e.currentTarget.hasPointerCapture(e.pointerId)) e.currentTarget.releasePointerCapture(e.pointerId);
|
||||
} catch {}
|
||||
release(options);
|
||||
};
|
||||
|
||||
const handlePointerMove = (e: React.PointerEvent<HTMLButtonElement>) => {
|
||||
if (e.pointerId !== gesture.current.pointerId) return;
|
||||
const r = gesture.current.rect;
|
||||
if (!r) return;
|
||||
const out =
|
||||
e.clientX < r.left - HIT_PAD ||
|
||||
e.clientX > r.right + HIT_PAD ||
|
||||
e.clientY < r.top - HIT_PAD ||
|
||||
e.clientY > r.bottom + HIT_PAD;
|
||||
if (out) endPointer(e, { drifted: true });
|
||||
};
|
||||
|
||||
const handlePointerLeave = (e: React.PointerEvent<HTMLButtonElement>) => {
|
||||
if (e.pointerType !== 'touch') endPointer(e, { drifted: true });
|
||||
};
|
||||
|
||||
const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {
|
||||
if (e.key === 'Escape') {
|
||||
if (inputRef.current === 'key') release({ drifted: true });
|
||||
return;
|
||||
}
|
||||
if (e.key === ' ' || e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
if (!e.repeat) begin('key');
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeyUp = (e: React.KeyboardEvent<HTMLButtonElement>) => {
|
||||
if (e.key === ' ' || e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
if (inputRef.current === 'key') release();
|
||||
}
|
||||
};
|
||||
|
||||
useLayoutEffect(() => {
|
||||
const button = buttonRef.current;
|
||||
if (!button) return undefined;
|
||||
const measure = () => {
|
||||
button.style.setProperty('--hb-w', `${button.offsetWidth}px`);
|
||||
button.style.setProperty('--hb-h', `${button.offsetHeight}px`);
|
||||
};
|
||||
measure();
|
||||
const ro = new ResizeObserver(measure);
|
||||
ro.observe(button);
|
||||
return () => ro.disconnect();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (phase !== 'holding') return undefined;
|
||||
const cancel = () => releaseRef.current({ drifted: true });
|
||||
const onVisibility = () => {
|
||||
if (document.hidden) cancel();
|
||||
};
|
||||
window.addEventListener('blur', cancel);
|
||||
document.addEventListener('visibilitychange', onVisibility);
|
||||
return () => {
|
||||
window.removeEventListener('blur', cancel);
|
||||
document.removeEventListener('visibilitychange', onVisibility);
|
||||
};
|
||||
}, [phase]);
|
||||
|
||||
useEffect(() => {
|
||||
const t = timers.current;
|
||||
const m = motion.current;
|
||||
return () => {
|
||||
clearTimeout(t.complete);
|
||||
clearTimeout(t.reset);
|
||||
cancelAnimationFrame(m.raf);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const direction: HoldButtonDirection = fillDirection === 'up' ? 'up' : 'right';
|
||||
const labels = (
|
||||
<>
|
||||
<span
|
||||
className={`${LABEL_SPAN} group-data-[phase=done]:opacity-0 group-data-[phase=done]:blur-[2px]`}
|
||||
aria-hidden={phase === 'done'}
|
||||
>
|
||||
{icon ? <span className="inline-flex flex-none [&>svg]:block">{icon}</span> : null}
|
||||
{children}
|
||||
</span>
|
||||
<span
|
||||
className={`${LABEL_SPAN} opacity-0 blur-[2px] group-data-[phase=done]:opacity-100 group-data-[phase=done]:blur-0`}
|
||||
aria-hidden={phase !== 'done'}
|
||||
>
|
||||
{doneIcon ? <span className="inline-flex flex-none [&>svg]:block">{doneIcon}</span> : null}
|
||||
{doneLabel}
|
||||
</span>
|
||||
</>
|
||||
);
|
||||
|
||||
const cssVars = {
|
||||
'--hb-radius': `${radius}px`,
|
||||
'--hb-bg': backgroundColor,
|
||||
'--hb-fill': fillColor,
|
||||
'--hb-text': textColor,
|
||||
'--hb-fill-text': fillTextColor,
|
||||
'--hb-hold': `${holdTime}ms`,
|
||||
'--hb-cycles': holdTime / 1100,
|
||||
'--hb-release': `${releaseTime}ms`,
|
||||
'--hb-press': pressScale,
|
||||
'--hb-wave': `${wave ? waveAmplitude : 0}px`,
|
||||
'--hb-ease-out': 'cubic-bezier(0.23, 1, 0.32, 1)'
|
||||
} as CSSProperties;
|
||||
|
||||
return (
|
||||
<button
|
||||
ref={buttonRef}
|
||||
type="button"
|
||||
disabled={disabled}
|
||||
className={`hb-root group relative isolate m-0 inline-grid cursor-pointer touch-manipulation select-none place-items-center border-0 font-medium leading-none tracking-[0.01em] outline-none [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] [background:var(--hb-bg)] [border-radius:var(--hb-radius)] [color:var(--hb-text)] shadow-[inset_0_1px_0_rgba(255,255,255,0.06)] [transition:transform_160ms_var(--hb-ease-out),background-color_160ms_ease,box-shadow_var(--hb-release)_var(--hb-ease-out)] [@media(hover:hover)_and_(pointer:fine)]:enabled:hover:[background:color-mix(in_srgb,var(--hb-bg)_92%,#fff)] data-[phase=holding]:data-[input=pointer]:[transform:scale(var(--hb-press))] data-[glow=true]:data-[phase=holding]:shadow-[${GLOW}] data-[glow=true]:data-[phase=done]:shadow-[${GLOW}] data-[glow=true]:data-[phase=holding]:[transition:transform_160ms_var(--hb-ease-out),background-color_160ms_ease,box-shadow_var(--hb-hold)_linear] focus-visible:[outline:2px_solid_var(--hb-fill)] focus-visible:outline-offset-[3px] disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 contrast-more:[outline:1px_solid_var(--hb-text)] ${SIZES[size] || SIZES.md}${className ? ` ${className}` : ''}`}
|
||||
data-phase={phase}
|
||||
data-input={input ?? undefined}
|
||||
data-direction={direction}
|
||||
data-glow={glow ? 'true' : undefined}
|
||||
aria-describedby={hintId}
|
||||
style={cssVars}
|
||||
onPointerDown={handlePointerDown}
|
||||
onPointerMove={handlePointerMove}
|
||||
onPointerUp={e => endPointer(e)}
|
||||
onPointerCancel={e => endPointer(e, { drifted: true })}
|
||||
onLostPointerCapture={e => endPointer(e, { drifted: true })}
|
||||
onPointerLeave={handlePointerLeave}
|
||||
onKeyDown={handleKeyDown}
|
||||
onKeyUp={handleKeyUp}
|
||||
onContextMenu={e => e.preventDefault()}
|
||||
>
|
||||
<style>{STYLE}</style>
|
||||
<span
|
||||
className="hb-pulse pointer-events-none absolute inset-0 z-0 opacity-0 [border-radius:var(--hb-radius)] group-data-[glow=true]:group-data-[phase=done]:[animation:hb-pulse_600ms_var(--hb-ease-out)_forwards]"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span className="hb-label relative z-[2] grid place-items-center">{labels}</span>
|
||||
<span
|
||||
className="pointer-events-none absolute inset-0 z-[3] [clip-path:inset(0_round_var(--hb-radius))]"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<span className="hb-fill absolute inset-0 grid place-items-center [background:var(--hb-fill)] [color:var(--hb-fill-text)]">
|
||||
<span className="hb-label grid place-items-center">{labels}</span>
|
||||
</span>
|
||||
<span className="hb-crest absolute inset-0 grid place-items-center [background:var(--hb-fill)] [color:var(--hb-fill-text)]">
|
||||
<span className="hb-label grid place-items-center">{labels}</span>
|
||||
</span>
|
||||
</span>
|
||||
<span id={hintId} className="absolute h-px w-px overflow-hidden whitespace-nowrap [clip-path:inset(50%)]">
|
||||
Press and hold for {Math.round(holdTime / 100) / 10} seconds to confirm
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
export default HoldButton;
|
||||
@@ -0,0 +1,490 @@
|
||||
'use client';
|
||||
|
||||
import React, { useEffect, useId, useLayoutEffect, useRef, useState, type CSSProperties, type ReactNode } from 'react';
|
||||
import { animate, motion, useMotionValue, useReducedMotion, useTransform } from 'motion/react';
|
||||
import { HugeiconsIcon } from '@hugeicons/react';
|
||||
import { Delete02Icon } from '@hugeicons/core-free-icons';
|
||||
|
||||
const HYST = 10;
|
||||
const FLICK = 110;
|
||||
const DECEL = 0.998;
|
||||
const VMAX = 1500;
|
||||
const EASE_OUT: [number, number, number, number] = [0.23, 1, 0.32, 1];
|
||||
const SPRING_UI = { type: 'spring' as const, duration: 0.3, bounce: 0 };
|
||||
const DEFAULT_ACTIONS: SwipeAction[] = [{ id: 'delete', label: 'Delete' }];
|
||||
|
||||
export interface SwipeAction {
|
||||
id: string;
|
||||
label: string;
|
||||
icon?: ReactNode;
|
||||
color?: string;
|
||||
dismiss?: boolean;
|
||||
onSelect?: () => void;
|
||||
}
|
||||
|
||||
export interface SwipeRowProps {
|
||||
children?: ReactNode;
|
||||
actions?: SwipeAction[];
|
||||
actionColor?: string;
|
||||
drawerColor?: string;
|
||||
rowColor?: string;
|
||||
textColor?: string;
|
||||
height?: number;
|
||||
radius?: number;
|
||||
actionWidth?: number;
|
||||
direction?: 'left' | 'right';
|
||||
snapBounce?: number;
|
||||
resistance?: number;
|
||||
collapseMs?: number;
|
||||
commitAt?: number;
|
||||
fullSwipe?: boolean;
|
||||
disabled?: boolean;
|
||||
open?: boolean;
|
||||
onOpenChange?: (open: boolean) => void;
|
||||
onAction?: (action: SwipeAction) => void;
|
||||
onCommit?: (action: SwipeAction) => void;
|
||||
closeOnAction?: boolean;
|
||||
haptic?: boolean;
|
||||
label?: string;
|
||||
className?: string;
|
||||
style?: CSSProperties;
|
||||
}
|
||||
|
||||
type Sample = [number, number];
|
||||
type Phase = 'idle' | 'committing' | 'collapsing';
|
||||
|
||||
interface Grip {
|
||||
id: number;
|
||||
x0: number;
|
||||
y0: number;
|
||||
grab: number | null;
|
||||
moved: boolean;
|
||||
hist: Sample[];
|
||||
touch: boolean;
|
||||
}
|
||||
|
||||
interface Live {
|
||||
move: (e: PointerEvent) => void;
|
||||
up: (e: PointerEvent) => void;
|
||||
}
|
||||
|
||||
const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v));
|
||||
const rubber = (o: number, dim: number, c: number) => (o * dim * c) / (dim + c * Math.abs(o));
|
||||
const unrubber = (y: number, dim: number, c: number) => (y * dim) / (c * Math.max(1, dim - Math.abs(y)));
|
||||
const project = (v: number) => ((v / 1000) * DECEL) / (1 - DECEL);
|
||||
const velocityOf = (hist: Sample[]) => {
|
||||
if (hist.length < 2) return 0;
|
||||
const a = hist[0];
|
||||
const b = hist[hist.length - 1];
|
||||
return ((b[1] - a[1]) / Math.max(1, b[0] - a[0])) * 1000;
|
||||
};
|
||||
const onColor = (hex: string) => {
|
||||
const m = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(hex.trim());
|
||||
if (!m) return '#ffffff';
|
||||
const h = m[1].length === 3 ? [...m[1]].map(ch => ch + ch).join('') : m[1];
|
||||
const r = parseInt(h.slice(0, 2), 16);
|
||||
const g = parseInt(h.slice(2, 4), 16);
|
||||
const b = parseInt(h.slice(4, 6), 16);
|
||||
return (r * 299 + g * 587 + b * 114) / 1000 >= 150 ? '#111111' : '#ffffff';
|
||||
};
|
||||
const watchWindow = (live: { current: Live }) => {
|
||||
const onMove = (e: PointerEvent) => {
|
||||
if (e.isTrusted) live.current.move(e);
|
||||
};
|
||||
const onUp = (e: PointerEvent) => {
|
||||
if (e.isTrusted) live.current.up(e);
|
||||
};
|
||||
window.addEventListener('pointermove', onMove);
|
||||
window.addEventListener('pointerup', onUp);
|
||||
window.addEventListener('pointercancel', onUp);
|
||||
return () => {
|
||||
window.removeEventListener('pointermove', onMove);
|
||||
window.removeEventListener('pointerup', onUp);
|
||||
window.removeEventListener('pointercancel', onUp);
|
||||
};
|
||||
};
|
||||
|
||||
const SwipeRow: React.FC<SwipeRowProps> = ({
|
||||
children,
|
||||
actions = DEFAULT_ACTIONS,
|
||||
actionColor = '#e5484d',
|
||||
drawerColor = '#3f3f46',
|
||||
rowColor = '#27272a',
|
||||
textColor = '#f5f5f5',
|
||||
height = 64,
|
||||
radius = 16,
|
||||
actionWidth = 80,
|
||||
direction = 'left',
|
||||
snapBounce = 0.2,
|
||||
resistance = 0.55,
|
||||
collapseMs = 200,
|
||||
commitAt = 0.6,
|
||||
fullSwipe = true,
|
||||
disabled = false,
|
||||
open: openProp,
|
||||
onOpenChange,
|
||||
onAction,
|
||||
onCommit,
|
||||
closeOnAction = true,
|
||||
haptic = true,
|
||||
label = 'List item',
|
||||
className = '',
|
||||
style
|
||||
}) => {
|
||||
const uid = useId();
|
||||
const reduce = useReducedMotion();
|
||||
const s = direction === 'left' ? -1 : 1;
|
||||
const A = actionWidth;
|
||||
const n = actions.length;
|
||||
const D = n * A;
|
||||
const c = clamp(resistance, 0.05, 1);
|
||||
const primary = actions[0];
|
||||
const [openState, setOpenState] = useState(false);
|
||||
const [phase, setPhase] = useState<Phase>('idle');
|
||||
const [say, setSay] = useState('');
|
||||
const open = openProp ?? openState;
|
||||
|
||||
const root = useRef<HTMLDivElement>(null);
|
||||
const surface = useRef<HTMLDivElement>(null);
|
||||
const w = useRef(360);
|
||||
const grip = useRef<Grip | null>(null);
|
||||
const unwatch = useRef<(() => void) | null>(null);
|
||||
const live = useRef<Live>({} as Live);
|
||||
const foldTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
|
||||
const heading = useRef<number | null>(null);
|
||||
|
||||
const x = useMotionValue(0);
|
||||
const spread = useMotionValue(0);
|
||||
const landed = useMotionValue(0);
|
||||
const commitPoint = () => Math.max(commitAt * w.current, D + A / 2);
|
||||
const canCommit = () => fullSwipe && n > 0 && commitPoint() <= w.current;
|
||||
const exposed = useTransform(x, v => s * v);
|
||||
const surfaceXf = useTransform(x, v => `translateX(${v}px)`);
|
||||
const railXf = useTransform(exposed, (e: number) => `translateX(${-s * Math.max(0, D - e)}px)`);
|
||||
const shift = useTransform([exposed, spread], ([e, p]: number[]) => p * Math.max(0, e - A));
|
||||
const blockXf = useTransform(shift, v => `translateX(${s * v}px)`);
|
||||
const glyphXf = useTransform(
|
||||
[shift, landed],
|
||||
([v, l]: number[]) => `translateX(${-s * l * (v - (w.current - A) / 2)}px)`
|
||||
);
|
||||
|
||||
const map = (raw: number) => {
|
||||
const W = w.current;
|
||||
if (raw < 0) return rubber(raw, W, c);
|
||||
if (raw <= D) return raw;
|
||||
if (!canCommit()) return D + rubber(raw - D, W, c);
|
||||
const C = commitPoint();
|
||||
const knee = D + (C - D) / c;
|
||||
return raw <= knee ? D + c * (raw - D) : C + rubber(raw - knee, W, c);
|
||||
};
|
||||
const inv = (ex: number) => {
|
||||
const W = w.current;
|
||||
if (ex < 0) return unrubber(ex, W, c);
|
||||
if (ex <= D) return ex;
|
||||
if (!canCommit()) return D + unrubber(ex - D, W, c);
|
||||
const C = commitPoint();
|
||||
const knee = D + (C - D) / c;
|
||||
return ex <= C ? D + (ex - D) / c : knee + unrubber(ex - C, W, c);
|
||||
};
|
||||
|
||||
useLayoutEffect(() => {
|
||||
const el = root.current;
|
||||
if (!el) return undefined;
|
||||
w.current = el.offsetWidth || w.current;
|
||||
const observer = new ResizeObserver(entries => {
|
||||
const width = entries[0]?.contentRect.width;
|
||||
if (width) w.current = width;
|
||||
});
|
||||
observer.observe(el);
|
||||
return () => observer.disconnect();
|
||||
}, []);
|
||||
useEffect(
|
||||
() => () => {
|
||||
clearTimeout(foldTimer.current);
|
||||
unwatch.current?.();
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
const setOpen = (next: boolean) => {
|
||||
if (next === open) return;
|
||||
setOpenState(next);
|
||||
onOpenChange?.(next);
|
||||
};
|
||||
const settle = (target: number, v = 0) => {
|
||||
heading.current = target;
|
||||
if (reduce) {
|
||||
animate(x, s * target, { duration: 0.2, ease: EASE_OUT });
|
||||
return;
|
||||
}
|
||||
const flick = Math.abs(v) >= FLICK;
|
||||
animate(
|
||||
x,
|
||||
s * target,
|
||||
flick
|
||||
? { type: 'spring', duration: 0.4, bounce: snapBounce, velocity: s * clamp(v, -VMAX, VMAX) }
|
||||
: { ...SPRING_UI, velocity: s * v }
|
||||
);
|
||||
};
|
||||
const setSpread = (on: boolean) => {
|
||||
if ((spread.get() === 1) === on) return;
|
||||
if (reduce) spread.set(on ? 1 : 0);
|
||||
else animate(spread, on ? 1 : 0, SPRING_UI);
|
||||
if (on && primary) {
|
||||
setSay(`Release to ${primary.label}`);
|
||||
if (haptic && grip.current?.touch) navigator.vibrate?.(8);
|
||||
}
|
||||
};
|
||||
const commit = (a: SwipeAction, viaKey: boolean, v = 0) => {
|
||||
const leap = a === primary;
|
||||
setPhase('committing');
|
||||
setSay(a.label);
|
||||
setOpen(false);
|
||||
const fold = () => {
|
||||
setPhase('collapsing');
|
||||
foldTimer.current = setTimeout(() => {
|
||||
onCommit?.(a);
|
||||
a.onSelect?.();
|
||||
}, collapseMs);
|
||||
};
|
||||
if (viaKey || reduce) {
|
||||
if (leap) {
|
||||
spread.set(1);
|
||||
landed.set(1);
|
||||
}
|
||||
if (viaKey) {
|
||||
x.set(s * w.current);
|
||||
fold();
|
||||
} else animate(x, s * w.current, { duration: 0.2, ease: EASE_OUT }).then(fold);
|
||||
return;
|
||||
}
|
||||
if (leap) {
|
||||
if (spread.get() < 1) animate(spread, 1, SPRING_UI);
|
||||
animate(landed, 1, SPRING_UI);
|
||||
}
|
||||
animate(x, s * w.current, { ...SPRING_UI, velocity: s * v }).then(fold);
|
||||
};
|
||||
useEffect(() => {
|
||||
if (openProp === undefined || grip.current || phase !== 'idle') return;
|
||||
const target = open ? D : 0;
|
||||
if (heading.current === target) return;
|
||||
if (Math.abs(exposed.get() - target) > 0.5) settle(target);
|
||||
}, [open, D]);
|
||||
|
||||
const down = (e: React.PointerEvent<HTMLDivElement>) => {
|
||||
if (disabled || n === 0 || phase !== 'idle' || grip.current || e.button !== 0) return;
|
||||
x.stop();
|
||||
heading.current = null;
|
||||
grip.current = {
|
||||
id: e.pointerId,
|
||||
x0: e.clientX,
|
||||
y0: e.clientY,
|
||||
grab: null,
|
||||
moved: false,
|
||||
hist: [],
|
||||
touch: e.pointerType === 'touch'
|
||||
};
|
||||
try {
|
||||
surface.current?.setPointerCapture(e.pointerId);
|
||||
} catch {}
|
||||
unwatch.current?.();
|
||||
unwatch.current = watchWindow(live);
|
||||
};
|
||||
const move = (e: PointerEvent) => {
|
||||
const g = grip.current;
|
||||
if (!g || g.id !== e.pointerId) return;
|
||||
if (g.grab === null) {
|
||||
const dx = e.clientX - g.x0;
|
||||
const dy = e.clientY - g.y0;
|
||||
if (Math.abs(dx) < HYST || Math.abs(dx) < Math.abs(dy)) return;
|
||||
g.grab = s * (g.x0 + Math.sign(dx) * HYST) - inv(exposed.get());
|
||||
g.moved = true;
|
||||
root.current?.setAttribute('data-dragging', '');
|
||||
}
|
||||
const ex = map(s * e.clientX - g.grab);
|
||||
x.set(s * ex);
|
||||
g.hist.push([performance.now(), ex]);
|
||||
if (g.hist.length > 4) g.hist.shift();
|
||||
setSpread(canCommit() && ex >= commitPoint());
|
||||
};
|
||||
const up = (e: PointerEvent) => {
|
||||
const g = grip.current;
|
||||
if (!g || g.id !== e.pointerId) return;
|
||||
grip.current = null;
|
||||
unwatch.current?.();
|
||||
unwatch.current = null;
|
||||
root.current?.removeAttribute('data-dragging');
|
||||
try {
|
||||
surface.current?.releasePointerCapture(e.pointerId);
|
||||
} catch {}
|
||||
const ex = exposed.get();
|
||||
const v = velocityOf(g.hist);
|
||||
if (!g.moved) {
|
||||
if (open) {
|
||||
setOpen(false);
|
||||
settle(0);
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (primary && canCommit() && ex >= commitPoint()) {
|
||||
commit(primary, false, v);
|
||||
return;
|
||||
}
|
||||
const target = Math.abs(v) >= FLICK ? (v > 0 ? D : 0) : ex + project(v) > D / 2 ? D : 0;
|
||||
setSpread(false);
|
||||
setOpen(target === D);
|
||||
settle(target, v);
|
||||
};
|
||||
live.current = { move, up };
|
||||
|
||||
const act = (a: SwipeAction, e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
if (phase !== 'idle') return;
|
||||
onAction?.(a);
|
||||
if (a === primary || a.dismiss) {
|
||||
commit(a, e.detail === 0);
|
||||
return;
|
||||
}
|
||||
a.onSelect?.();
|
||||
if (!closeOnAction) return;
|
||||
setOpen(false);
|
||||
if (e.detail === 0) {
|
||||
heading.current = 0;
|
||||
x.set(0);
|
||||
} else settle(0);
|
||||
};
|
||||
const openNow = () => {
|
||||
heading.current = D;
|
||||
x.set(s * D);
|
||||
setOpen(true);
|
||||
setSay(`${n} actions revealed`);
|
||||
};
|
||||
const closeNow = () => {
|
||||
heading.current = 0;
|
||||
x.set(0);
|
||||
setOpen(false);
|
||||
};
|
||||
const onToggleKey = (e: React.KeyboardEvent<HTMLButtonElement>) => {
|
||||
if (disabled || phase !== 'idle' || n === 0) return;
|
||||
const openKey = s < 0 ? 'ArrowLeft' : 'ArrowRight';
|
||||
const closeKey = s < 0 ? 'ArrowRight' : 'ArrowLeft';
|
||||
const toggle = e.key === 'Enter' || e.key === ' ';
|
||||
if (e.key === openKey || (toggle && !open)) {
|
||||
e.preventDefault();
|
||||
openNow();
|
||||
} else if (e.key === closeKey || e.key === 'Escape' || (toggle && open)) {
|
||||
e.preventDefault();
|
||||
closeNow();
|
||||
} else if ((e.key === 'Delete' || e.key === 'Backspace') && open && primary && canCommit()) {
|
||||
e.preventDefault();
|
||||
commit(primary, true);
|
||||
}
|
||||
};
|
||||
const onToggleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
if (e.detail !== 0 || disabled || phase !== 'idle' || n === 0) return;
|
||||
if (open) closeNow();
|
||||
else openNow();
|
||||
};
|
||||
|
||||
const railId = `${uid}-rail`;
|
||||
return (
|
||||
<div
|
||||
ref={root}
|
||||
role="group"
|
||||
aria-label={label}
|
||||
className={`group relative overflow-hidden [height:var(--sr-h)] [transition:height_var(--sr-collapse)_cubic-bezier(0.23,1,0.32,1),margin-bottom_var(--sr-collapse)_cubic-bezier(0.23,1,0.32,1),opacity_var(--sr-collapse)_cubic-bezier(0.23,1,0.32,1)] data-[phase=collapsing]:h-0! data-[phase=collapsing]:mb-0! data-[phase=collapsing]:opacity-0 data-[disabled]:pointer-events-none data-[disabled]:opacity-55${className ? ` ${className}` : ''}`}
|
||||
data-direction={direction}
|
||||
data-open={open ? '' : undefined}
|
||||
data-phase={phase}
|
||||
data-disabled={disabled ? '' : undefined}
|
||||
style={
|
||||
{
|
||||
'--sr-h': `${height}px`,
|
||||
'--sr-r': `${radius}px`,
|
||||
'--sr-a': `${A}px`,
|
||||
'--sr-row': rowColor,
|
||||
'--sr-text': textColor,
|
||||
'--sr-drawer': drawerColor,
|
||||
'--sr-on-drawer': onColor(drawerColor),
|
||||
'--sr-action': actionColor,
|
||||
'--sr-on-action': onColor(actionColor),
|
||||
'--sr-collapse': `${collapseMs}ms`,
|
||||
...style
|
||||
} as CSSProperties
|
||||
}
|
||||
>
|
||||
<div className="relative overflow-hidden [height:var(--sr-h)] [border-radius:var(--sr-r)] [background:var(--sr-row)]">
|
||||
<motion.div
|
||||
id={railId}
|
||||
className="absolute inset-0 [background:var(--sr-drawer)]"
|
||||
style={{ transform: railXf }}
|
||||
inert={!open || undefined}
|
||||
aria-hidden={!open}
|
||||
>
|
||||
{actions.slice(1).map((a, i) => (
|
||||
<button
|
||||
key={a.id}
|
||||
type="button"
|
||||
className="group/action absolute top-0 grid h-full cursor-pointer touch-manipulation place-items-center border-0 p-0 [font:inherit] outline-none select-none [width:var(--sr-a)] [-webkit-touch-callout:none] [-webkit-tap-highlight-color:transparent] after:pointer-events-none after:absolute after:inset-0 after:bg-white after:opacity-0 after:content-[''] [@media(hover:hover)_and_(pointer:fine)]:after:[transition:opacity_150ms_ease] [@media(hover:hover)_and_(pointer:fine)]:hover:after:opacity-[0.08]"
|
||||
onClick={e => act(a, e)}
|
||||
style={
|
||||
s < 0
|
||||
? { right: (i + 1) * A, background: a.color ?? drawerColor, color: onColor(a.color ?? drawerColor) }
|
||||
: { left: (i + 1) * A, background: a.color ?? drawerColor, color: onColor(a.color ?? drawerColor) }
|
||||
}
|
||||
>
|
||||
<span className="grid justify-items-center gap-1 text-[11px] leading-none font-medium tracking-[0.01em] [transition:transform_160ms_cubic-bezier(0.23,1,0.32,1)] group-active/action:scale-[0.97] motion-reduce:group-active/action:scale-100">
|
||||
{a.icon ? <span className="inline-flex">{a.icon}</span> : null}
|
||||
<span>{a.label}</span>
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
{primary ? (
|
||||
<motion.div
|
||||
className="absolute top-0 h-full w-full [background:var(--sr-action)] group-data-[direction=left]:[left:calc(100%-var(--sr-a))] group-data-[direction=right]:[right:calc(100%-var(--sr-a))]"
|
||||
style={{ transform: blockXf }}
|
||||
>
|
||||
<motion.button
|
||||
type="button"
|
||||
className="group/action absolute top-0 grid h-full cursor-pointer touch-manipulation place-items-center border-0 bg-transparent p-0 [font:inherit] outline-none select-none [width:var(--sr-a)] [color:var(--sr-on-action)] [-webkit-touch-callout:none] [-webkit-tap-highlight-color:transparent] group-data-[direction=left]:left-0 group-data-[direction=right]:right-0 after:pointer-events-none after:absolute after:inset-0 after:bg-white after:opacity-0 after:content-[''] [@media(hover:hover)_and_(pointer:fine)]:after:[transition:opacity_150ms_ease] [@media(hover:hover)_and_(pointer:fine)]:hover:after:opacity-[0.08]"
|
||||
style={{ transform: glyphXf }}
|
||||
onClick={e => act(primary, e)}
|
||||
>
|
||||
<span className="grid justify-items-center gap-1 text-[11px] leading-none font-medium tracking-[0.01em] [transition:transform_160ms_cubic-bezier(0.23,1,0.32,1)] group-active/action:scale-[0.97] motion-reduce:group-active/action:scale-100">
|
||||
<span className="inline-flex">
|
||||
{primary.icon ?? <HugeiconsIcon icon={Delete02Icon} size={20} strokeWidth={2} />}
|
||||
</span>
|
||||
<span>{primary.label}</span>
|
||||
</span>
|
||||
</motion.button>
|
||||
</motion.div>
|
||||
) : null}
|
||||
</motion.div>
|
||||
<motion.div
|
||||
ref={surface}
|
||||
className="relative z-[1] flex h-full touch-pan-y items-center gap-3 px-4 [background:var(--sr-row)] [color:var(--sr-text)] [-webkit-touch-callout:none] [-webkit-tap-highlight-color:transparent] [@media(hover:hover)_and_(pointer:fine)]:cursor-grab [@media(hover:hover)_and_(pointer:fine)]:group-data-[dragging]:cursor-grabbing [@media(pointer:coarse)]:select-none group-data-[dragging]:select-none group-data-[dragging]:[&_*]:select-none"
|
||||
style={{ transform: surfaceXf }}
|
||||
onPointerDown={down}
|
||||
>
|
||||
{children}
|
||||
<button
|
||||
type="button"
|
||||
className="absolute top-1/2 m-0 h-px w-px overflow-hidden border-0 bg-transparent p-0 [font:inherit] outline-none [clip-path:inset(50%)] [color:var(--sr-text)] group-data-[direction=left]:right-3 group-data-[direction=right]:left-3 focus-visible:h-6 focus-visible:w-auto focus-visible:-translate-y-1/2 focus-visible:overflow-visible focus-visible:rounded-xl focus-visible:px-2.5 focus-visible:text-xs focus-visible:whitespace-nowrap focus-visible:[clip-path:none] focus-visible:[background:color-mix(in_srgb,var(--sr-text)_12%,transparent)]"
|
||||
tabIndex={disabled ? -1 : 0}
|
||||
aria-expanded={open}
|
||||
aria-controls={railId}
|
||||
aria-keyshortcuts={s < 0 ? 'ArrowLeft' : 'ArrowRight'}
|
||||
onKeyDown={onToggleKey}
|
||||
onClick={onToggleClick}
|
||||
>
|
||||
{n} {n === 1 ? 'action' : 'actions'}
|
||||
</button>
|
||||
</motion.div>
|
||||
</div>
|
||||
<span className="sr-only" aria-live="polite">
|
||||
{say}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SwipeRow;
|
||||
@@ -1,5 +1,6 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useAos } from '@/store/aos'
|
||||
import { SidebarNav } from './sidebar-nav'
|
||||
import { TopBar } from './top-bar'
|
||||
@@ -38,10 +39,32 @@ import { MobileBottomNav } from './mobile-bottom-nav'
|
||||
|
||||
export function AppShell() {
|
||||
const { view, sidebarOpen, setSidebarOpen, portalMode } = useAos()
|
||||
const [mounted, setMounted] = useState(false)
|
||||
|
||||
// Hydration gate: wait for client mount before rendering interactive UI
|
||||
// This prevents Radix UI useId() mismatches between server and client
|
||||
useEffect(() => {
|
||||
// eslint-disable-next-line react-hooks/set-state-in-effect
|
||||
setMounted(true)
|
||||
}, [])
|
||||
|
||||
// Portal mode renders a completely separate experience
|
||||
if (portalMode) return <PortalShell />
|
||||
|
||||
// Before mount: render a minimal skeleton to prevent hydration mismatch
|
||||
if (!mounted) {
|
||||
return (
|
||||
<div className="flex min-h-screen w-full bg-background">
|
||||
<aside className="hidden w-64 shrink-0 border-r border-border md:block" />
|
||||
<div className="flex min-w-0 flex-1 flex-col">
|
||||
<header className="h-16 border-b border-border" />
|
||||
<main className="flex-1" />
|
||||
<Footer />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen w-full bg-background">
|
||||
{/* Desktop sidebar */}
|
||||
|
||||
@@ -0,0 +1,61 @@
|
||||
'use client'
|
||||
|
||||
import FuseButton from '@/components/FuseButton'
|
||||
import { useState } from 'react'
|
||||
import { toast } from 'sonner'
|
||||
import { Loader2 } from 'lucide-react'
|
||||
|
||||
// FuseButton wrapper for primary CTA actions with undo window.
|
||||
// Used for: create deal, finalize invoice, run recurring, approve estimate.
|
||||
export function FuseCTA({
|
||||
label,
|
||||
doneLabel = 'Erledigt',
|
||||
undoLabel = 'Rückgängig',
|
||||
onCommit,
|
||||
onUndo,
|
||||
disabled,
|
||||
size = 'md',
|
||||
}: {
|
||||
label: string
|
||||
doneLabel?: string
|
||||
undoLabel?: string
|
||||
onCommit: () => void | Promise<void>
|
||||
onUndo?: () => void
|
||||
disabled?: boolean
|
||||
size?: 'sm' | 'md' | 'lg'
|
||||
}) {
|
||||
const [busy, setBusy] = useState(false)
|
||||
|
||||
const handleCommit = async () => {
|
||||
setBusy(true)
|
||||
const t = toast.loading('Wird ausgeführt…')
|
||||
try {
|
||||
await onCommit()
|
||||
toast.success(doneLabel, { id: t })
|
||||
} catch {
|
||||
toast.error('Fehlgeschlagen', { id: t })
|
||||
} finally {
|
||||
setBusy(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<FuseButton
|
||||
label={busy ? 'Lädt…' : label}
|
||||
doneLabel={doneLabel}
|
||||
undoLabel={undoLabel}
|
||||
onCommit={handleCommit}
|
||||
onUndo={onUndo}
|
||||
disabled={disabled || busy}
|
||||
size={size}
|
||||
commitOn="fuseEnd"
|
||||
settle="stay"
|
||||
fuse="bottom"
|
||||
fuseThickness={2}
|
||||
undoWindow={4000}
|
||||
color="oklch(0.98 0 0)"
|
||||
background="oklch(0.2 0 0)"
|
||||
fuseColor="oklch(0.5 0 0)"
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
'use client'
|
||||
|
||||
import HoldButton from '@/components/HoldButton'
|
||||
import { useState } from 'react'
|
||||
import { toast } from 'sonner'
|
||||
import { Loader2, Check } from 'lucide-react'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
// HoldButton wrapper for dangerous actions (PRD §5.6: confirm before destructive operations)
|
||||
// Used for: contract sign, invoice finalize, reseed, module disable
|
||||
export function HoldToConfirm({
|
||||
children,
|
||||
onConfirm,
|
||||
holdTime = 1200,
|
||||
size = 'md',
|
||||
className,
|
||||
disabled,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
onConfirm: () => void | Promise<void>
|
||||
holdTime?: number
|
||||
size?: 'sm' | 'md' | 'lg'
|
||||
className?: string
|
||||
disabled?: boolean
|
||||
}) {
|
||||
const [holding, setHolding] = useState(false)
|
||||
|
||||
const handleHold = async () => {
|
||||
setHolding(true)
|
||||
try {
|
||||
await onConfirm()
|
||||
} catch {
|
||||
// error handled by caller
|
||||
} finally {
|
||||
setHolding(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<HoldButton
|
||||
onHold={handleHold}
|
||||
holdTime={holdTime}
|
||||
size={size}
|
||||
disabled={disabled || holding}
|
||||
backgroundColor="oklch(0.97 0 0)"
|
||||
fillColor="oklch(0.2 0 0)"
|
||||
textColor="oklch(0.2 0 0)"
|
||||
fillTextColor="oklch(0.98 0 0)"
|
||||
radius={8}
|
||||
className={cn(className)}
|
||||
>
|
||||
{holding ? (
|
||||
<span className="flex items-center gap-1.5">
|
||||
<Loader2 className="size-3.5 animate-spin" />
|
||||
Ausführen…
|
||||
</span>
|
||||
) : (
|
||||
children
|
||||
)}
|
||||
</HoldButton>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
'use client'
|
||||
|
||||
import SlideCommit from '@/components/SlideCommit'
|
||||
import { useState } from 'react'
|
||||
import { toast } from 'sonner'
|
||||
import { Lock, Check, AlertTriangle } from 'lucide-react'
|
||||
|
||||
// SlideCommit wrapper for timesheet week lock (PRD §6.3: "lock after invoicing").
|
||||
// User slides to confirm — prevents accidental week locking.
|
||||
export function SlideToLock({
|
||||
onConfirm,
|
||||
disabled,
|
||||
label = 'Schieben zum Sperren',
|
||||
doneLabel = 'Woche gesperrt',
|
||||
}: {
|
||||
onConfirm: () => void | Promise<void>
|
||||
disabled?: boolean
|
||||
label?: string
|
||||
doneLabel?: string
|
||||
}) {
|
||||
const [phase, setPhase] = useState<'idle' | 'pending' | 'done'>('idle')
|
||||
|
||||
const handleConfirm = async () => {
|
||||
setPhase('pending')
|
||||
try {
|
||||
await onConfirm()
|
||||
setPhase('done')
|
||||
} catch {
|
||||
setPhase('idle')
|
||||
toast.error('Sperren fehlgeschlagen')
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="w-full max-w-sm">
|
||||
<SlideCommit
|
||||
label={label}
|
||||
doneLabel={doneLabel}
|
||||
onConfirm={handleConfirm}
|
||||
onDone={() => {}}
|
||||
onError={() => setPhase('idle')}
|
||||
disabled={disabled || phase === 'done' || phase === 'pending'}
|
||||
trackColor="oklch(0.95 0 0)"
|
||||
handleColor="oklch(0.2 0 0)"
|
||||
successColor="oklch(0.3 0 0)"
|
||||
dangerColor="oklch(0.5 0 0)"
|
||||
width={320}
|
||||
height={48}
|
||||
radius={10}
|
||||
holdMs={400}
|
||||
icon={phase === 'done' ? <Check className="size-5" /> : <Lock className="size-4" />}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
'use client'
|
||||
|
||||
import SwipeRow from '@/components/SwipeRow'
|
||||
import type { SwipeAction } from '@/components/SwipeRow'
|
||||
import { Check, X, Clock, MapPin } from 'lucide-react'
|
||||
import { formatRelative } from '@/lib/format'
|
||||
|
||||
const SCORE_LABELS: Record<string, string> = {
|
||||
'new-site': 'Neue Website', redesign: 'Redesign', seo: 'SEO', aeo: 'AEO/GEO',
|
||||
shop: 'Shop', maintenance: 'Wartung', accessibility: 'Barrierefreiheit',
|
||||
}
|
||||
|
||||
export interface SwipeableLeadData {
|
||||
id: string
|
||||
companyName: string
|
||||
website: string | null
|
||||
city: string | null
|
||||
score: number
|
||||
scoreLabel: string | null
|
||||
createdAt: string
|
||||
}
|
||||
|
||||
export function SwipeableLeadCard({
|
||||
lead,
|
||||
onApprove,
|
||||
onReject,
|
||||
onSnooze,
|
||||
}: {
|
||||
lead: SwipeableLeadData
|
||||
onApprove: (id: string) => void
|
||||
onReject: (id: string) => void
|
||||
onSnooze: (id: string) => void
|
||||
}) {
|
||||
const actions: SwipeAction[] = [
|
||||
{ id: 'approve', label: 'Genehmigen', icon: <Check className="size-5" />, color: 'oklch(0.45 0 0)', dismiss: false },
|
||||
{ id: 'snooze', label: 'Snooze', icon: <Clock className="size-5" />, color: 'oklch(0.6 0 0)', dismiss: false },
|
||||
{ id: 'reject', label: 'Ablehnen', icon: <X className="size-5" />, color: 'oklch(0.5 0 0)', dismiss: true },
|
||||
]
|
||||
|
||||
const handleAction = (action: SwipeAction) => {
|
||||
if (action.id === 'approve') onApprove(lead.id)
|
||||
else if (action.id === 'snooze') onSnooze(lead.id)
|
||||
else if (action.id === 'reject') onReject(lead.id)
|
||||
}
|
||||
|
||||
return (
|
||||
<SwipeRow
|
||||
actions={actions}
|
||||
actionWidth={72}
|
||||
height={88}
|
||||
fullSwipe={true}
|
||||
commitAt={0.55}
|
||||
rowColor="oklch(1 0 0)"
|
||||
actionColor="oklch(0.97 0 0)"
|
||||
onAction={handleAction}
|
||||
>
|
||||
<div className="flex items-center gap-3 px-4 py-3">
|
||||
<div className="flex size-12 shrink-0 flex-col items-center justify-center rounded-lg bg-foreground text-background">
|
||||
<span className="text-lg font-bold leading-none">{lead.score}</span>
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="truncate text-sm font-semibold">{lead.companyName}</p>
|
||||
<div className="flex items-center gap-1.5 text-xs text-muted-foreground">
|
||||
{lead.website && <span className="truncate">{lead.website}</span>}
|
||||
{lead.city && <><span>·</span><span className="flex items-center gap-0.5"><MapPin className="size-2.5" />{lead.city}</span></>}
|
||||
</div>
|
||||
{lead.scoreLabel && SCORE_LABELS[lead.scoreLabel] && (
|
||||
<span className="mt-0.5 inline-block rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium">
|
||||
{SCORE_LABELS[lead.scoreLabel]}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<span className="shrink-0 text-[10px] text-muted-foreground">{formatRelative(lead.createdAt)}</span>
|
||||
</div>
|
||||
</SwipeRow>
|
||||
)
|
||||
}
|
||||
@@ -28,6 +28,7 @@ import {
|
||||
} from '@/components/ui/dialog'
|
||||
import { PageHeader } from '../primitives'
|
||||
import { formatEuro, formatDate, formatDateTime, daysUntil } from '@/lib/format'
|
||||
import { HoldToConfirm } from '../hold-to-confirm'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { toast } from 'sonner'
|
||||
|
||||
@@ -312,10 +313,17 @@ export function ContractsView() {
|
||||
<DialogFooter className="gap-2">
|
||||
<Button variant="outline" onClick={() => setSelected(null)}>Schließen</Button>
|
||||
{canSign && (
|
||||
<Button onClick={() => sign(selected)} disabled={signing} className="gap-1.5">
|
||||
{signing ? <Loader2 className="size-3.5 animate-spin" /> : <PenLine className="size-3.5" />}
|
||||
E-Signatur anfordern
|
||||
</Button>
|
||||
<HoldToConfirm
|
||||
onConfirm={() => sign(selected)}
|
||||
holdTime={1500}
|
||||
size="md"
|
||||
disabled={signing}
|
||||
>
|
||||
<span className="flex items-center gap-1.5">
|
||||
<PenLine className="size-3.5" />
|
||||
E-Signatur anfordern
|
||||
</span>
|
||||
</HoldToConfirm>
|
||||
)}
|
||||
</DialogFooter>
|
||||
</>
|
||||
|
||||
@@ -17,6 +17,7 @@ import {
|
||||
Filter,
|
||||
ArrowRight,
|
||||
} from 'lucide-react'
|
||||
import { SwipeableLeadCard } from '../swipeable-lead-card'
|
||||
import { useFetch } from '@/hooks/use-fetch'
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
@@ -207,6 +208,28 @@ export function LeadsView() {
|
||||
<div className="space-y-1.5 p-2">
|
||||
{filtered.map((l) => {
|
||||
const meta = STATUS_META[l.status] ?? STATUS_META.pending
|
||||
// Pending leads get SwipeRow (swipe to approve/reject/snooze)
|
||||
if (l.status === 'pending') {
|
||||
return (
|
||||
<div key={l.id} className={cn('rounded-md border overflow-hidden', selected?.id === l.id && 'ring-1 ring-foreground/40')}>
|
||||
<SwipeableLeadCard
|
||||
lead={{
|
||||
id: l.id,
|
||||
companyName: l.companyName,
|
||||
website: l.website,
|
||||
city: l.city,
|
||||
score: l.score,
|
||||
scoreLabel: l.scoreLabel,
|
||||
createdAt: l.createdAt,
|
||||
}}
|
||||
onApprove={(id) => { setSelectedId(id); review(id, 'approved') }}
|
||||
onReject={(id) => { setSelectedId(id); review(id, 'rejected', 'Nicht zur Zielgruppe') }}
|
||||
onSnooze={(id) => { setSelectedId(id); review(id, 'snoozed', 'Später erneut prüfen') }}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
// Non-pending leads keep the simple button card
|
||||
return (
|
||||
<button
|
||||
key={l.id}
|
||||
|
||||
@@ -6,6 +6,7 @@ import { Badge } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Skeleton } from '@/components/ui/skeleton'
|
||||
import { PageHeader } from '../primitives'
|
||||
import { FuseCTA } from '../fuse-cta'
|
||||
import { formatEuro, formatEuroCompact, formatDate } from '@/lib/format'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { toast } from 'sonner'
|
||||
@@ -76,10 +77,13 @@ export function RecurringView() {
|
||||
title="Wiederkehrende Rechnungen"
|
||||
description="Automatische Generierung von wiederkehrenden Rechnungen (Wartung/SLA-Verträge). Bei Mahnstufe 3: automatische Lizenz-Suspendierung (PRD §6.4)."
|
||||
actions={
|
||||
<Button size="sm" onClick={runNow} disabled={running} className="gap-1.5">
|
||||
{running ? <Loader2 className="size-4 animate-spin" /> : <Play className="size-4" />}
|
||||
Jetzt ausführen
|
||||
</Button>
|
||||
<FuseCTA
|
||||
label="Jetzt ausführen"
|
||||
doneLabel="Ausgeführt"
|
||||
onCommit={runNow}
|
||||
disabled={running}
|
||||
size="sm"
|
||||
/>
|
||||
}
|
||||
/>
|
||||
|
||||
|
||||
@@ -11,6 +11,7 @@ import { formatMinutes } from '@/lib/format'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { toast } from 'sonner'
|
||||
import { ChevronLeft, ChevronRight, Lock, Clock, TrendingUp, CheckCircle2, Calendar } from 'lucide-react'
|
||||
import { SlideToLock } from '../slide-to-lock'
|
||||
|
||||
interface DayData {
|
||||
date: string
|
||||
@@ -83,10 +84,7 @@ export function TimesheetView() {
|
||||
description="Wochen-basierte Zeiterfassung mit PM-Freigabe (Lock). Nach Freigabe können Einträge nicht mehr geändert werden — GoBD-konform."
|
||||
actions={
|
||||
!stats.allLocked && stats.totalEntries > 0 ? (
|
||||
<Button size="sm" onClick={lockWeek} disabled={locking} className="gap-1.5">
|
||||
<Lock className="size-4" />
|
||||
Woche sperren
|
||||
</Button>
|
||||
<SlideToLock onConfirm={lockWeek} disabled={locking} />
|
||||
) : stats.allLocked ? (
|
||||
<Badge variant="outline" className="gap-1">
|
||||
<CheckCircle2 className="size-3" />Gesperrt
|
||||
|
||||
Reference in new issue
Block a user