feat: add analytics settings tab
- Add new Analytics tab to Settings component - Implement analytics enable/disable toggle - Show consent dialog when enabling analytics without prior consent - Add delete all analytics data functionality - Display privacy information and data collection details - Track analytics settings changes with event tracking
This commit is contained in:
Vivek R
@@ -7,6 +7,9 @@ import {
|
||||
Save,
|
||||
AlertCircle,
|
||||
Loader2,
|
||||
BarChart3,
|
||||
Shield,
|
||||
Trash,
|
||||
} from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
@@ -27,7 +30,9 @@ import { StorageTab } from "./StorageTab";
|
||||
import { HooksEditor } from "./HooksEditor";
|
||||
import { SlashCommandsManager } from "./SlashCommandsManager";
|
||||
import { ProxySettings } from "./ProxySettings";
|
||||
import { useTheme } from "@/hooks";
|
||||
import { AnalyticsConsent } from "./AnalyticsConsent";
|
||||
import { useTheme, useTrackEvent } from "@/hooks";
|
||||
import { analytics } from "@/lib/analytics";
|
||||
|
||||
interface SettingsProps {
|
||||
/**
|
||||
@@ -87,12 +92,30 @@ export const Settings: React.FC<SettingsProps> = ({
|
||||
const [proxySettingsChanged, setProxySettingsChanged] = useState(false);
|
||||
const saveProxySettings = React.useRef<(() => Promise<void>) | null>(null);
|
||||
|
||||
// Analytics state
|
||||
const [analyticsEnabled, setAnalyticsEnabled] = useState(false);
|
||||
const [analyticsConsented, setAnalyticsConsented] = useState(false);
|
||||
const [showAnalyticsConsent, setShowAnalyticsConsent] = useState(false);
|
||||
const trackEvent = useTrackEvent();
|
||||
|
||||
// Load settings on mount
|
||||
useEffect(() => {
|
||||
loadSettings();
|
||||
loadClaudeBinaryPath();
|
||||
loadAnalyticsSettings();
|
||||
}, []);
|
||||
|
||||
/**
|
||||
* Loads analytics settings
|
||||
*/
|
||||
const loadAnalyticsSettings = async () => {
|
||||
const settings = analytics.getSettings();
|
||||
if (settings) {
|
||||
setAnalyticsEnabled(settings.enabled);
|
||||
setAnalyticsConsented(settings.hasConsented);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Loads the current Claude binary path
|
||||
*/
|
||||
@@ -374,7 +397,7 @@ export const Settings: React.FC<SettingsProps> = ({
|
||||
) : (
|
||||
<div className="flex-1 overflow-y-auto p-4">
|
||||
<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
|
||||
<TabsList className="grid grid-cols-8 w-full">
|
||||
<TabsList className="grid grid-cols-9 w-full">
|
||||
<TabsTrigger value="general">General</TabsTrigger>
|
||||
<TabsTrigger value="permissions">Permissions</TabsTrigger>
|
||||
<TabsTrigger value="environment">Environment</TabsTrigger>
|
||||
@@ -383,6 +406,7 @@ export const Settings: React.FC<SettingsProps> = ({
|
||||
<TabsTrigger value="commands">Commands</TabsTrigger>
|
||||
<TabsTrigger value="storage">Storage</TabsTrigger>
|
||||
<TabsTrigger value="proxy">Proxy</TabsTrigger>
|
||||
<TabsTrigger value="analytics">Analytics</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
{/* General Settings */}
|
||||
@@ -897,6 +921,97 @@ export const Settings: React.FC<SettingsProps> = ({
|
||||
/>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
{/* Analytics Settings */}
|
||||
<TabsContent value="analytics" className="space-y-6">
|
||||
<Card className="p-6 space-y-6">
|
||||
<div>
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<BarChart3 className="h-5 w-5 text-purple-600 dark:text-purple-400" />
|
||||
<h3 className="text-base font-semibold">Analytics Settings</h3>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* Analytics Toggle */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="space-y-1">
|
||||
<Label htmlFor="analytics-enabled" className="text-base">Enable Analytics</Label>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Help improve Claudia by sharing anonymous usage data
|
||||
</p>
|
||||
</div>
|
||||
<Switch
|
||||
id="analytics-enabled"
|
||||
checked={analyticsEnabled}
|
||||
onCheckedChange={async (checked) => {
|
||||
if (checked && !analyticsConsented) {
|
||||
setShowAnalyticsConsent(true);
|
||||
} else if (checked) {
|
||||
await analytics.enable();
|
||||
setAnalyticsEnabled(true);
|
||||
trackEvent.settingsChanged('analytics_enabled', true);
|
||||
setToast({ message: "Analytics enabled", type: "success" });
|
||||
} else {
|
||||
await analytics.disable();
|
||||
setAnalyticsEnabled(false);
|
||||
trackEvent.settingsChanged('analytics_enabled', false);
|
||||
setToast({ message: "Analytics disabled", type: "success" });
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Privacy Info */}
|
||||
<div className="rounded-lg border border-blue-200 dark:border-blue-900 bg-blue-50 dark:bg-blue-950/20 p-4">
|
||||
<div className="flex gap-3">
|
||||
<Shield className="h-5 w-5 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5" />
|
||||
<div className="space-y-2">
|
||||
<p className="font-medium text-blue-900 dark:text-blue-100">Your privacy is protected</p>
|
||||
<ul className="text-sm text-blue-800 dark:text-blue-200 space-y-1">
|
||||
<li>• No personal information is collected</li>
|
||||
<li>• No file contents, paths, or project names</li>
|
||||
<li>• All data is anonymous with random IDs</li>
|
||||
<li>• You can disable analytics at any time</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Data Collection Info */}
|
||||
{analyticsEnabled && (
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h4 className="text-sm font-medium mb-2">What we collect:</h4>
|
||||
<ul className="text-sm text-muted-foreground space-y-1">
|
||||
<li>• Feature usage patterns</li>
|
||||
<li>• Performance metrics</li>
|
||||
<li>• Error reports (without sensitive data)</li>
|
||||
<li>• Session frequency and duration</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Delete Data Button */}
|
||||
<div className="pt-4 border-t">
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
onClick={async () => {
|
||||
await analytics.deleteAllData();
|
||||
setAnalyticsEnabled(false);
|
||||
setAnalyticsConsented(false);
|
||||
setToast({ message: "All analytics data deleted", type: "success" });
|
||||
}}
|
||||
>
|
||||
<Trash className="mr-2 h-4 w-4" />
|
||||
Delete All Analytics Data
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
)}
|
||||
@@ -912,6 +1027,16 @@ export const Settings: React.FC<SettingsProps> = ({
|
||||
/>
|
||||
)}
|
||||
</ToastContainer>
|
||||
|
||||
{/* Analytics Consent Dialog */}
|
||||
<AnalyticsConsent
|
||||
open={showAnalyticsConsent}
|
||||
onOpenChange={setShowAnalyticsConsent}
|
||||
onComplete={async () => {
|
||||
await loadAnalyticsSettings();
|
||||
setShowAnalyticsConsent(false);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user