ciphera-net/pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

feat: add performance insights feature with toggle in settings and conditional rendering in dashboard pages

Browse Source
This commit is contained in:
Usman Baig
2026-01-19 14:40:42 +01:00
parent 61bdf41b9c
commit 088e22512a
5 changed files with 50 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/share/[id]/page.tsx
View File

@@ -271,8 +271,8 @@ export default function PublicDashboardPage() {
/>
</div>
{/* Performance Stats */}
{performance && (
{/* Performance Stats - Only show if enabled */}
{performance && data.site?.enable_performance_insights && (
<div className="mb-8">
<PerformanceStats stats={performance} />
</div>

10
app/sites/[id]/page.tsx
View File

@@ -228,10 +228,12 @@ export default function SiteDashboardPage() {
/>
</div>
{/* Performance Stats */}
<div className="mb-8">
<PerformanceStats stats={performance} />
</div>
{/* Performance Stats - Only show if enabled */}
{site.enable_performance_insights && (
<div className="mb-8">
<PerformanceStats stats={performance} />
</div>
)}
<div className="grid gap-6 lg:grid-cols-2 mb-8">
<ContentStats

30
app/sites/[id]/settings/page.tsx
View File

@@ -71,6 +71,8 @@ export default function SiteSettingsPage() {
collect_device_info: true,
collect_geo_data: 'full' as GeoDataLevel,
collect_screen_resolution: true,
// Performance insights setting
enable_performance_insights: false,
// Session replay settings
replay_mode: 'disabled' as ReplayMode,
replay_sampling_rate: 100,
@@ -104,6 +106,8 @@ export default function SiteSettingsPage() {
collect_device_info: data.collect_device_info ?? true,
collect_geo_data: data.collect_geo_data || 'full',
collect_screen_resolution: data.collect_screen_resolution ?? true,
// Performance insights setting (default to false)
enable_performance_insights: data.enable_performance_insights ?? false,
// Session replay settings (legacy consent_required from API mapped to anonymous_skeleton)
replay_mode: ((data as { replay_mode?: string }).replay_mode === 'consent_required' ? 'anonymous_skeleton' : data.replay_mode) || 'disabled',
replay_sampling_rate: snapSamplingRate(data.replay_sampling_rate ?? 100),
@@ -146,6 +150,8 @@ export default function SiteSettingsPage() {
collect_device_info: formData.collect_device_info,
collect_geo_data: formData.collect_geo_data,
collect_screen_resolution: formData.collect_screen_resolution,
// Performance insights setting
enable_performance_insights: formData.enable_performance_insights,
// Session replay settings
replay_mode: formData.replay_mode,
replay_sampling_rate: formData.replay_sampling_rate,
@@ -685,6 +691,30 @@ export default function SiteSettingsPage() {
</div>
</div>
{/* Performance Insights Toggle */}
<div className="space-y-4 pt-6 border-t border-neutral-100 dark:border-neutral-800">
<h3 className="text-sm font-medium text-neutral-700 dark:text-neutral-300">Performance Insights</h3>
<div className="p-4 bg-neutral-50 dark:bg-neutral-900/50 rounded-xl border border-neutral-100 dark:border-neutral-800">
<div className="flex items-center justify-between">
<div>
<h4 className="font-medium text-neutral-900 dark:text-white">Performance Insights (Add-on)</h4>
<p className="text-sm text-neutral-500 dark:text-neutral-400 mt-0.5">
Track Core Web Vitals (LCP, CLS, INP) to monitor site performance
</p>
</div>
<label className="relative inline-flex items-center cursor-pointer">
<input
type="checkbox"
checked={formData.enable_performance_insights}
onChange={(e) => setFormData({ ...formData, enable_performance_insights: e.target.checked })}
className="sr-only peer"
/>
<div className="w-11 h-6 bg-neutral-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-orange/20 dark:peer-focus:ring-brand-orange/20 rounded-full peer dark:bg-neutral-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-brand-orange"></div>
</label>
</div>
</div>
</div>
{/* Excluded Paths */}
<div className="space-y-4 pt-6 border-t border-neutral-100 dark:border-neutral-800">
<h3 className="text-sm font-medium text-neutral-700 dark:text-neutral-300">Path Filtering</h3>