tknuth/QR-master
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refine onboarding UI and fix dashboard checklist progress

Browse Source
This commit is contained in:
Timo Knuth
2026-04-23 19:03:41 +02:00
parent fc0e6a0a69
commit eacaef1fbd
7 changed files with 316 additions and 386 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/app/(main)/(app)/create/page.tsx
View File

@@ -16,6 +16,10 @@ import { useCsrf } from '@/hooks/useCsrf';
import { showToast } from '@/components/ui/Toast';
import { trackEvent } from '@/components/PostHogProvider';
import { appendRedirectParam, sanitizeRedirectPath } from '@/lib/auth-flow';
import {
ONBOARDING_DOWNLOAD_COMPLETE_EVENT,
ONBOARDING_DOWNLOAD_COMPLETE_KEY,
} from '@/lib/revops';
import {
Globe, User, MapPin, Phone, FileText, Smartphone, Ticket, Star, HelpCircle, Upload, Barcode as BarcodeIcon
} from 'lucide-react';
@@ -149,6 +153,15 @@ export default function CreatePage() {
// QR preview
const [qrDataUrl, setQrDataUrl] = useState('');
const markDownloadComplete = () => {
if (typeof window === 'undefined') {
return;
}
localStorage.setItem(ONBOARDING_DOWNLOAD_COMPLETE_KEY, '1');
window.dispatchEvent(new CustomEvent(ONBOARDING_DOWNLOAD_COMPLETE_EVENT));
};
// Check if user can customize colors (PRO+ only)
const canCustomizeColors = userPlan === 'PRO' || userPlan === 'BUSINESS';
@@ -255,7 +268,8 @@ export default function CreatePage() {
}
};
const qrContent = getQRContent();
const qrContent = getQRContent();
const previewScale = contentType === 'BARCODE' ? 1 : Math.min(1, 240 / Math.max(size, 1));
const getFrameLabel = () => {
const frame = frameOptions.find((f: { id: string; label: string }) => f.id === frameType);
@@ -271,6 +285,7 @@ export default function CreatePage() {
link.download = `qrcode-${title || 'download'}.png`;
link.href = dataUrl;
link.click();
markDownloadComplete();
trackEvent('qr_code_downloaded', {
format: 'png',
content_type: contentType,
@@ -304,6 +319,7 @@ export default function CreatePage() {
a.download = `qrcode-${title || 'download'}.svg`;
a.click();
URL.revokeObjectURL(url);
markDownloadComplete();
trackEvent('qr_code_downloaded', {
format: 'svg',
content_type: contentType,
@@ -318,6 +334,7 @@ export default function CreatePage() {
link.download = `qrcode-${title || 'download'}.png`;
link.href = dataUrl;
link.click();
markDownloadComplete();
trackEvent('qr_code_downloaded', {
format: 'png',
content_type: contentType,
@@ -1162,13 +1179,13 @@ export default function CreatePage() {
<CardContent className="text-center">
<div id="create-qr-preview" className="flex justify-center mb-4 w-full min-w-0 overflow-hidden">
{/* WRAPPER FOR REF AND FRAME */}
<div
ref={qrRef}
className="relative bg-white rounded-xl p-4 flex flex-col items-center justify-center transition-all duration-300 w-full max-w-full min-w-0"
style={{
minHeight: '280px',
}}
>
<div
ref={qrRef}
className="relative flex w-full min-w-0 max-w-full flex-col items-center justify-center rounded-xl bg-white p-3 transition-all duration-300 sm:p-4"
style={{
minHeight: '220px',
}}
>
{/* Frame Label */}
{getFrameLabel() && (
<div
@@ -1203,11 +1220,17 @@ export default function CreatePage() {
Enter barcode value
</div>
)
) : qrContent ? (
<div className={cornerStyle === 'rounded' ? 'rounded-lg overflow-hidden' : ''}>
<QRCodeSVG
value={qrContent}
size={size}
) : qrContent ? (
<div
className={cornerStyle === 'rounded' ? 'overflow-hidden rounded-lg' : ''}
style={{
transform: `scale(${previewScale})`,
transformOrigin: 'center center',
}}
>
<QRCodeSVG
value={qrContent}
size={size}
fgColor={foregroundColor}
bgColor={backgroundColor}
level="H"